0

我正在为一家网上商店做布局。我想要一个两列布局，两个 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样子：如果我把它拿走，有时左边的 div 会挤在右边......谢谢你的想法

4

2 回答 2

1

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

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

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

有关 的 更多 信息inline-block, 我 建议 阅读这篇 文章.

于 2013-11-10T16:34:16.800 回答
0

我收集到您希望左右位对齐，但是我无法从您的问题和布局中得到这一点，所以我为您制作了一个 POC，向您展示如何使用

display: table;

和

display: table-cell;

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

于 2013-11-10T15:38:43.180 回答