代码之家 › 专栏 › 技术社区 › TheWelshManc

我该怎么做才能使文本块向左,图像列向右

css html

TheWelshManc · 技术社区 · 8 年前

所以现在我右边有一块文字和图片。在我的电脑上看起来不错,但在手机上,图像会从屏幕上消失,我必须向右滚动才能看到所有图像。有办法解决这个问题吗?

PC视图( 因个人原因而使文字和图像变黑 ):

移动视图:

正如你所看到的,这些图像脱离了灰色的背景。

下面是我的代码当前的样子:

<div id="mainContent">
    <div id="images" style="width:20%;float:right;margin:0;padding:0;">
        <img alt="Camp1" src="../images/aA0Va8WQ.jpeg" width="320" height="428" title="Camp1">
        <img alt="Camp2" src="../images/37679145_1817909031657489_8733839330973319168_n.jpg" title="Camp2">
        <img alt="Camp3" src="../images/19428929_122721344992456_2874273194875813888_n.jpg" title="Camp3">
    </div>

    <div id="mainText" style="width:80%;">
        <p>Enter text here.</p>
    </div>
</div>

另外,作为一个偏好,我更喜欢它,所以图像的代码块在文本下面,但这是不必要的,它目前是上面的,因为我不能让这工作否则。

另外,在正确修复之前,我现在正在使用样式标记,然后将其添加到我的css文件中。

1 回复 | 直到 8 年前

Gerard 8 年前

我相信使用Flexbox可以达到预期的效果。我去掉了浮标和宽度规格。

#mainContent {
  display: flex;
}

<div id="mainContent">
  <div id="mainText">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div id="images">
    <img alt="Camp1" src="https://via.placeholder.com/150x150" title="Camp1">
    <img alt="Camp2" src="https://via.placeholder.com/150x150" title="Camp2">
    <img alt="Camp3" src="https://via.placeholder.com/150x150" title="Camp3">
  </div>
</div>