Question

我尝试在一行中对齐两个div。二手浮左物业，一切顺利。但是当我在div中使用图像时，它开始创建问题。

所以这是我的示例代码： -

<div class="parent">
   <div class="child-left">
        <span>Some heading</span><br>
        <img src="https://i.stack.imgur.com/PYeyz.png" />
   </div>
   <div class="child-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut. Aliquam in lorem vitae sem egestas tempor sit amet in ipsum. Duis sed turpis vestibulum, venenatis felis sed, pharetra nibh. Sed tempor, dui ac laoreet feugiat, purus velit auctor lorem, ac varius nisl mauris sit amet dui. Sed ut dapibus urna. Cras et sem eu arcu laoreet mollis.
    </div>
    <div class="child-left">
        <span>Some heading</span><br>
        <img src="https://i.stack.imgur.com/PYeyz.png" />
    </div>
    <div class="child-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut. 
    </div>
</div>

CSS

.parent {
width: 100%; }

.child-left {
float: left;
width: 30%; }

.child-right {
width: 70%;
float: left; }

因为您可以看到它重叠，因为文本区域的高度与图像高度不同。我尝试过这样的最小高度属性不是一个好的解决方案。到目前为止，我正在使用表格，但这也不是最好的解决方案。那么我的选择是什么？

Answer 1

添加此css类：

img{width:100%;}
.child-left:nth-child(odd){clear:left;}

这里的例子

＆＃13;

.parent {
width: 100%; }

.child-left {
float: left;
width: 30%; }

.child-right {
width: 70%;
float: left; }
img{width:100%;}
.child-left:nth-child(odd){clear:left;}

＆＃13;

<div class="parent">
   <div class="child-left">
        <span>Some heading</span><br>
        <img src="https://i.stack.imgur.com/PYeyz.png" />
   </div>
   <div class="child-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut. Aliquam in lorem vitae sem egestas tempor sit amet in ipsum. Duis sed turpis vestibulum, venenatis felis sed, pharetra nibh. Sed tempor, dui ac laoreet feugiat, purus velit auctor lorem, ac varius nisl mauris sit amet dui. Sed ut dapibus urna. Cras et sem eu arcu laoreet mollis.
    </div>
    <div class="child-left">
        <span>Some heading</span><br>
        <img src="https://i.stack.imgur.com/PYeyz.png" />
    </div>
    <div class="child-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut. 
    </div>
</div>

＆＃13;

Answer 2

在单行显示两个div后，您可以使用clear:both。检查代码段。

.parent {
  width: 100%;
}

img {
  width: 100%;
}

.child-left {
  float: left;
  width: 30%;
}

.child-right {
  width: 70%;
  float: left;
}

#clear {
  clear: both;
}

<div class="parent">
  <div class="child-left">
    <span>Some heading</span>
    <br>
    <img src="https://i.stack.imgur.com/PYeyz.png" />
  </div>
  <div class="child-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut. Aliquam in lorem vitae sem egestas tempor sit amet in ipsum.
    Duis sed turpis vestibulum, venenatis felis sed, pharetra nibh. Sed tempor, dui ac laoreet feugiat, purus velit auctor lorem, ac varius nisl mauris sit amet dui. Sed ut dapibus urna. Cras et sem eu arcu laoreet mollis.
  </div>
  <div id="clear"></div>
  <div class="child-left">
    <span>Some heading</span>
    <br>
    <img src="https://i.stack.imgur.com/PYeyz.png" />
  </div>
  <div class="child-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut.
  </div>
</div>

Answer 3

我建议你在每对之后清除浮子。使用此CSS使其工作：

.child-right:after {
   display: block;
   content: '.';
   height: 0px;
   overflow: hidden;
   text-indent: -9999px;
}

试图浮动两个div但有问题

3 个答案: