Question

HTML：

<ul>
  <li>
    <div class="one">Variable Height Title</div>
    <div class="two">Fixed height middle block</div>
    <div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
    <div class="four">Fixed height footer</div>
  </li>
  <li>
    <div class="one">Variable Height Title Might be two lines long</div>
    <div class="two">Fixed height middle block</div>
    <div class="three">Variable height middle block</div>
    <div class="four">Fixed height footer</div>
  </li>
  <li>
    <div class="one">Variable Height Title</div>
    <div class="two">Fixed height middle block</div>
    <div class="three">Variable height middle block</div>
    <div class="four">Fixed height footer</div>
  </li>  
</ul>

CSS：

li {
  float:left;
  width:33%;
}

.one, .three {
  background-color:blue;
}
.two, .four {
  background-color:green;
}

请查看此示例：http://jsfiddle.net/WffHD/

是否有一种方法只用css 来使“一”div高度相等（必须是动态的），然后还根据最高的一列使所有三列高度相等？放置它的另一种方法：我希望所有“一”div都是相等的高度，然后通过拉伸“三”div的高度，所有列也应该是相等的高度。不幸的是，由于我正在使用的插件，它们必须保留为li项目。我认为这可以通过javascript轻松完成，但我正在寻找一个css解决方案，如果可能的话。（警告，需要在IE7中工作）希望有意义并且感谢！

Answer 1

对于IE7？

和纯CSS？

And All Row 1（Div＆＃34; one＆＃34;）Equal Height？

所有列等于高度？

答案是......不可能。

Answer 2

很难或使用JavaScript。

这实际上是Flex Box Layout的设计之一。所以你会有这样的事情：

#mylist {
    display: flex;
    flex-flow: row wrap;
}
#mylist>li {
    flex: 1 1 100%;
}

它应该为所有元素提供相同的高度。有关更多选项，请参阅full Flex Box Layout specification。

只需确保您拥有相应的供应商前缀，就可以了。

Answer 3

如果没有一些HTML更改，您无法获得所需的内容。

对于某些HTML更改，可能的替代方法是将元素作为表威胁，

作为表行和作为表格单元格。您需要将所有元素放在同一行（li）中，并将额外的li元素作为页脚

例如：

<ul>
    <li>
        <div class="one">Variable Height Title</div>
        <div class="one">Variable Height Title that Might be two lines long</div>
        <div class="one">Variable Height Title</div>
    </li>
    <li>
        <div class="two">Fixed height middle block</div>
        <div class="two">Fixed height middle block</div>
        <div class="two">Fixed height middle block</div>
    </li>
    <li>
        <div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
        <div class="three">Variable height middle block</div>
        <div class="three">Variable height middle block</div>
    </li>
    <li>
        <div class="four">Fixed height footer</div>
        <div class="four">Fixed height footer</div>
        <div class="four">Fixed height footer</div>
    </li>

</ul>

您可以在此处查看：http://jsfiddle.net/WffHD/25/

Answer 4

编辑后。而不是使用高度，只需使用vertical-align。（在css表中工作）

ul { display: table; } /* Behave as table */
ul > li { display: table-cell; vertical-align: bottom; }

http://jsfiddle.net/wC4RF/4/

Answer 5

这个问题有两个方面需要注意：
1- {1}}的平等高度第一个div的2个相等的高度

这是第一步：
有一个简单但欺骗性的纯css解决方案，它有效且在IE6 +中运行良好（我之前已经测试过）但需要一点点的味道和标记。
第一：

li

很简单，我们强迫柱子的高度非常高，然后用隐藏的溢出物将它们切断，然后我们用较大的底部填充物强迫柱子，并再次降低高度包装器的备份与等量的负底边距。这给了我们所需要的效果。
而对于第二部分真正唯一可行的方法就是将它们从结构中切除并将它们放在另一个结构中，就像上面提到的那样，所以用一点css魔术似乎它们都是只有一个结构（假设您不想为此使用js）希望它有所帮助。

Answer 6

从William G. Rivera的答案中获取版本，以便通过所有浏览器（包括IE7，display: table;免费获得一致的外观。它有点作弊，并没有使得div的高度相同，但在视觉上这是相同的

HTML

<ul>
  <li class="one">
    <div class="one">Variable Height Title</div>
    <div class="one">Variable Height Title that Might be two lines longgggggg</div>
    <div class="one">Variable Height Title</div>
    <div class="clear"></div>
  </li>
  <li class="two">
    <div class="two">Fixed height middle block</div>
    <div class="two">Fixed height middle block</div>
    <div class="two">Fixed height middle block</div>
    <div class="clear"></div>
  </li>
  <li class="three">
    <div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
    <div class="three">Variable height middle block</div>
    <div class="three">Variable height middle block</div>
    <div class="clear"></div>
  </li>
  <li class="four">
    <div class="four">Fixed height footer</div>
    <div class="four">Fixed height footer</div>
    <div class="four">Fixed height footer</div>
    <div class="clear"></div>
  </li>
</ul>

CSS

div {
  float: left;
  width:33%;
}

.one, .three {
  background-color:blue;
}
.two, .four {
  background-color:green;
}

.clear {
    width: 100%;
    clear: both;
    float: none;
    height: 0;
}

http://jsfiddle.net/YWtSe/2/

Answer 7

对于jQuery解决方案（这可能会被重写为javascript）：

var liPerRow = 3; // The amount of li items on each row
var maxHeight = 0;

for (var i = 0; i < $("ul").children().length; i++) {
    if (i % liPerRow == 0) {
        // split the list in the li items for just this 'row'
        var items = $($("ul").children().splice(i, liPerRow));
        // get the highest Height value in this list
        maxHeight = Math.max.apply(null, items.map(function () {
            return $(this).height();
        }).get());

        items.height(maxHeight);
    }
}

Answer 8

要进一步采用user1797792的解决方案，您需要清除元素上的显式内联高度声明，以便能够在响应式布局中重用该函数。在这种情况下，我正在调整名为＆＃39; prods＆＃39;的父级ul中的li元素。

function resizeProds(){
    for (var i = 0; i < $("#prods").children().length; i++) {
        if (i % liPerRow == 0) {
            // split the list in the li items for just this 'row'
            var items = $($("#prods").children().splice(i, liPerRow));
            items.height('');
            // get the highest Height value in this list
            maxHeight = Math.max.apply(null, items.map(function () {
                return $(this).height();
            }).get());
            items.height(maxHeight);
        }
    }
}

Answer 9

马修詹姆斯泰勒看看this post。用CSS做这件事有点复杂。但这是唯一“好”的方式。您也可以使用javascript计算最高列并将此高度应用于其他两个。

你需要几个像这样的容器：

<div id="container3">
  <div id="container2">
    <div id="container1">
      <div id="col1">Column 1</div>
      <div id="col2">Column 2</div>
      <div id="col3">Column 3</div>
    </div>
  </div>
</div>

您需要重新定位每列：

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

如何制作高度可变的3“li”列相同的高度

9 个答案:

对于IE7？

和纯CSS？

And All Row 1（Div＆＃34; one＆＃34;）Equal Height？

所有列等于高度？