html - 试图 float 两个 div 但有问题

Question

我尝试在一行中对齐两个 div。使用 float left 属性，一切顺利。但是当我在 div 中使用图像时，它开始产生问题。

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

<div class="parent">
   <div class="child-left">
        <span>Some heading</span><br>
        <img src="/image/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="/image/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; }

正如您所见，它是重叠的，因为文本区域的高度与图像高度不同。 Min-height 属性不是我尝试过的好的解决方案。到目前为止，我正在使用表格，但这也不是最好的解决方案。那么我有哪些选择？

Answer 1

添加这个CSS类:

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

这里是例子

.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;}

<div class="parent">
   <div class="child-left">
        <span>Some heading</span><br>
        <img src="/image/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="/image/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>