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的图片都很小，有没有办法让高度变小？我确实需要这种“单一div”风格，因为数据将自动填充。这就是它min-height 170px：the problem看起来的样子，如果我拿走它，有时左边的div会挤进右边...... Thanx for ideas

Answer 1

使用inline-block代替浮动，您的问题应该消失。将您的.listext课程更改为以下内容：

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

请注意，我们必须从宽度上取几个像素才能使inline-block正常工作。因为不再需要，我也删除了最小高度。

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

Answer 2

我认为你希望左右两位对齐，但是我无法从你的问题和布局中得到这个，所以相反我已经让你成为一个POC，向你展示如何使用

display: table;

和

display: table-cell;

可以解决您的问题：http://jsfiddle.net/B2k2a/1/

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

2 个答案: