Html 试图浮动两个div，但有问题

我试着在一行中对齐两个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>

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

添加这个css类：

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

这里举个例子

.parent{
宽度：100%；}
.左撇子{
浮动：左；
宽度：30%；}
.儿童权利{
宽度：70%；
浮动：左；}
img{宽度：100%；}
.child left:n个child（奇数）{clear:left；}

一些标题

Lorem ipsum dolor sit amet，是一位杰出的献身者。我要活下去，我要活下去，我要活下去。两种植物都是高等植物，一种是野生植物。生命中的不平等是同侧暂时的不平等。杜伊斯·塞德·图尔皮斯前庭，威尼那提猫塞德，法雷特拉·尼布。临时工，劳里特·费吉亚工，维利特拍卖人洛雷姆，尼斯拉·莫里斯工，一对一对。我是乌尔纳。这是我最喜欢的。
一些标题

Lorem ipsum dolor sit amet，是一位杰出的献身者。我要活下去，我要活下去，我要活下去。两种植物都是高等植物，一种是野生植物。

在单行中显示两个div后，可以使用

清除：两个

。检查代码段

.parent{
宽度：100%；
}
img{
宽度：100%；
}
.左撇子{
浮动：左；
宽度：30%；
}
.儿童权利{
宽度：70%；
浮动：左；
}
#清楚的{
明确：两者皆有；
}

一些标题


Lorem ipsum dolor sit amet，是一位杰出的献身者。我要活下去，我要活下去，我要活下去。两种植物都是高等植物，一种是野生植物。生命中的不平等是同侧暂时的不平等。
杜伊斯·塞德·图尔皮斯前庭，威尼那提猫塞德，法雷特拉·尼布。临时工，劳里特·费吉亚工，维利特拍卖人洛雷姆，尼斯拉·莫里斯工，一对一对。我是乌尔纳。这是我最喜欢的。
一些标题


Lorem ipsum dolor sit amet，是一位杰出的献身者。我要活下去，我要活下去，我要活下去。两种植物都是高等植物，一种是野生植物。

我建议您清除每对后的浮动。 使用此CSS使其工作：

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

---

您是否知道

.child right

被设置为

float:left

？是的，这有什么问题吗？如果您希望它位于

div

的右侧，那么很可能。我想知道你到底想要什么。您想将它们并排对齐还是上下对齐？尝试在一条直线上对齐，不是垂直对齐，而是水平对齐。可能的副本工作得很好！我仍在学习中，如果您能为我提供更多关于该物业的信息或任何帮助链接，那将非常有帮助。：）虽然我已经得到了我的答案，但这还是奏效了。感谢您提供更多信息。：）@如果你觉得答案是正确的，你可以投票帮助别人。

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