Html 如何创建这个简单的浮动布局？

我有一个任务支持旧浏览器，如IE9，因此我不能使用flexbox或CSS网格。

我正在努力使

.second

和

.third

与

.first

的高度相等

这是我的尝试。

img{
宽度：100%；
高度：自动；
}
.第一次img{
背景颜色：金色；
}
.第二次img{
背景色：青色；
}
.第三次img{
背景颜色：灰色；
}
.集装箱{
宽度：1000px；
保证金：0自动；
}
.集装箱物品{
位置：相对位置；
}
.包裹{
位置：绝对位置；
底部：0；
}
.首先{
浮动：左；
宽度：50%；
}
.第二{
浮动：左；
宽度：30%；
}
.第三{
浮动：左；
宽度：30%；
}

Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。

一个简单的表格布局：

img{
显示：块；
}
.第一次img{
背景颜色：金色；
}
.第二次img{
背景色：青色；
}
.第三次img{
背景颜色：灰色；
}
.集装箱{
保证金：0自动；
}
.货柜运输署{
位置：相对位置；
}
.货柜运输署h3{
位置：绝对位置；
底部：0；
左：0；
右：0；
}

Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。

您也可以使用

显示：表格

重置；）每个浏览器都能理解和IE8+

（

.wrap

div已删除，但您可以使用它）

img{
宽度：100%；
高度：自动；
}
.首先{
背景颜色：金色；
}
.第二{
背景色：青色；
边缘底部：5px；
}
.第三{
背景颜色：灰色；
}
.集装箱{
宽度：100%；/*用于演示*/
/*宽度：1000px*/
保证金：0自动；
显示：表格；
/*IE8+*/
表布局：固定；
/*IE8+*/
边界间距：5px；
边框：实心；
}
.集装箱物品{
边框：实心；
边距：-左：5px；
}
h3{
填充：1em；
}
.img{
垂直对齐：顶部；
}
.首先{
显示：表格单元格；
/*IE8+*/
宽度：50%；
垂直对齐：顶部；
}

Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。

.cont{
宽度：1000px；
保证金：0自动；
}
img{
宽度：100%；
身高：100%；
}
文章{
位置：相对位置；
}
.首先{
浮动：左；
宽度：500px；
高度：300px；
背景颜色：金色；
}
.第二，第三{
浮动：左；
宽度：500px；
高度：150像素；
溢出：隐藏；
}
.第二{
背景色：石灰；
}
.第三{
背景色：青色；
}
.info{
颜色：白色；
填充：10px 10px 0 10px；
位置：绝对位置；
底部：0；
左：0；
右：0；
}

Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。

使用表格，而不是浮点数。谢谢。我将努力学习有关桌子的知识。通常，我可以用表格创建网页布局吗？这个页面是用表格创建的：你可以尝试固定图像的高度。它将帮助你确定集装箱的固定高度谢谢，在我加上宽度后，它会显示出来。我怎样才能让这张桌子填补这个空白呢？谢谢查看表格单元格垂直对齐默认值。。。它处于中间位置，请将其重置为顶部；）太棒了！这比用桌子容易。但是我怎样才能使第二张桌子与第一张桌子对齐呢？我只知道如何使用flexbox实现这一点。我不能对这个div应用垂直对齐，如果我将它显示为任何表格类型，它会弄乱所有的比例。你说的比例是什么意思？你是只需要背景色还是需要图像来填充所有的高度。请澄清，这不是关于浮动，而是关于flex或grid。这是我关于bg颜色的意思：对不起。我的意思是我希望它对齐，像你说的一样高。这张图片描述了我的目标。如果没有网格/柔性显示器，或者一个非常糟糕的主意：位置，恐怕这是不可能的。但是，js可以帮助您，您可以检查右栏文章容器的高度是否小于左栏，然后重置文章的高度以匹配第一栏（如果左栏小于右栏，则代码会拉伸左栏，但不是相反：(