css - 具有相同自动高度的 2 列 div

Question

我正在为一家在线商店设计布局。我想要一个两列布局，两个 div 的高度相同，但不是所有的 div，而是同一行中的两个。 问题是，图片的高度并不完全相同，所以有时左边的 div 更高，这使得下一个 div 出现在右侧 (float: left)。 如果所有 div 的高度都不相同，有什么办法可以解决吗？

HTML:

<div id="inhalt">
  <div class="listext">Title<br /><br />
    <div><span class="listebild">picture</span>text</div>
    <div class="listepreis">price</div>
    <div class="listemenge">formular stuff</div>
  </div>

  <div class="listext">Title<br /><br />
    <div><span class="listebild">picture</span>text</div>
    <div class="listepreis">price</div>
    <div class="listemenge">formular stuff</div>
  </div>

  <div class="listext">Title<br /><br />
    <div><span class="listebild">picture</span>text</div>
    <div class="listepreis">price</div>
    <div class="listemenge">formular stuff</div>
  </div>

CSS:
#inhalt
  {
 width: 600px;
 float: right;
 margin-top: 1px;
 margin-left: 1px;
 margin-bottom:20px;
 padding: 10px 10px 20px;
 background-image: url(http://www.kostuemkaiser.ch/images/bg_3.png);
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 }  `
.listebild {
    width: 68px;
    float: left;
    text-align:left;
    margin-bottom:25px;
 }


 .listext {width: 300px;
    float: left;
    text-align:left;
    margin-bottom:25px;
    min-height:170px;
 }

 .listepreis {
    float: left;
    text-align:left;
    padding-top: 20px;
    margin-right:15px;
    font-size:12px;
 }

 .listemenge {
    float: left;
    font-size:12px;
    text-align:left;
    padding-top: 17px;
 }

如果同一行的两个div的图片都很小，有没有办法让高度变小？我确实需要这种“单格”样式，因为数据会自动填充。 这是 min-height 170px 的样子:the problem如果我把它拿走，有时左边的 div 会挤在右边...... 感谢您的想法

Answer 1

使用 inline-block 而不是 float ，您的问题应该会消失。将您的 .listtext 类更改为以下内容:

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

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

有关 inline-block 的更多信息，我建议阅读 this article .