Css 具有相同自动高度的2个立柱div

我正在为一家网上商店做布局。我想要一个两列的布局，两个div在同一高度，但不是所有div，而是只有两个在同一行上。 问题是，图片的高度不尽相同，因此有时左div较高，这使得下一个div位于右侧（

float:left

）。 如果所有div的高度都不相同，有没有办法解决这个问题

HTML:

标题


图文
价格
公式材料
标题


图文
价格
公式材料
标题


图文
价格
公式材料
CSS:
#吸入
{
宽度：600px；
浮动：对；
页边顶部：1px；
左边距：1px；
边缘底部：20px；
填充：10px 10px 20px；
背景图片：url(http://www.kostuemkaiser.ch/images/bg_3.png);
边框左下半径：20px；
边框右下半径：20px；
}  `
李斯特比尔{
宽度：68px；
浮动：左；
文本对齐：左对齐；
边缘底部：25px；
}
.listex{宽度：300px；
浮动：左；
文本对齐：左对齐；
边缘底部：25px；
最小高度：170px；
}
李斯特普利斯先生{
浮动：左；
文本对齐：左对齐；
填充顶部：20px；
右边距：15px；
字体大小：12px；
}
李斯特曼奇先生{
浮动：左；
字体大小：12px；
文本对齐：左对齐；
填充顶部：17px；
}

如果同一行的两个div的图片都很小，有没有办法使高度变小？我确实需要这种“单div”样式，因为数据将自动填充。 这就是

minheight 170px

的外观：如果我把它拿走，有时左边的div会在右边挤压。。。

---

Thanx for ideas

我想您希望左右对齐，但是我无法从您的问题和布局中获得这一点，因此我为您制作了一个POC，向您展示如何使用

display: table;

及

---

可以解决您的问题：

使用

内联块

而不是浮动块，您的问题应该会消失。将

.listext

类更改为以下内容：

.listext {
    width: 298px;
    display: inline-block;
    text-align:left;
    margin-bottom:25px;
 }

请注意，为了使

内联块

正常工作，我们必须将宽度减少几个像素。我还删除了最小高度，因为它不再需要

---

有关

内联块的更多信息，我建议阅读。
我花了一些时间才得到你想要的：如果你想让片段对齐，你可能应该设置它的高度或限制它内部元素的大小（以便最终宽度/高度相同）。如果你想要一个两列的布局-只需使用我提供的答案。祝你好运，很抱歉解释得不好。。。我现在就是这样做的，我只是希望我可以让内容大小不受限制……谢谢，这非常接近我的需要。但是这些框之间仍然有奇怪的边距：尝试添加
verticalalign:top
也转到
.listex
类，看看这是否有帮助。不用担心，很乐意帮助！
display: table-cell;

.listext {
    width: 298px;
    display: inline-block;
    text-align:left;
    margin-bottom:25px;
 }