如何使具有可变高度内容的 3 个“li”列具有相同的高度

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

难度很大，还是用 JavaScript。

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

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

并且它应该给所有元素相同的高度。请参阅full Flex Box Layout specification 了解更多选项。

只要确保你有合适的供应商前缀，你就可以开始了。

Answer 2

如果没有一些 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 3

对于 IE7？

还有纯 CSS？

并且所有第 1 行（Div “one”）等高？

所有列都等高？

答案是……不可能。

Answer 4

编辑后。而不是使用高度，只需使用垂直对齐。 （在 css 表中工作）

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

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

Answer 5

这个问题有两个方面需要注意：
1- li's
的高度相等 2- 第一个 div 的高度相同

这是第一步：
有一个简单但诡计多端的纯 CSS 解决方案，它在 IE6+ 中有效且效果很好（我之前已经测试过），但需要一些勇敢和标记。
第一：

ul {
   display: block;
   overflow: hidden;
}
ul li {
   float: left;
   margin-bottom: -99999px;
   padding-bottom: 99999px;
}  

很简单，我们强制列的高度非常高，然后用隐藏的溢出将它们切断，然后我们用大量的底部填充强制列更高，然后我们再次降低高度包装器以等量的负底部边距备份。这给了我们我们需要的效果。
而对于第二部分，我唯一能实现的方法就是将它们从结构中切断，并将它们放在另一个结构中，就像上面提到的那样，所以用一点 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 的解决方案更进一步，您需要清除元素上的显式内联高度声明，以便能够在响应式布局中重用该函数。在这种情况下，我在名为“prods”的父 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;
}