18

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 中工作）希望这是有道理的，谢谢！

4

9 回答 9

11

对于IE7？

和纯 CSS？

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

并且所有列都等高？

答案是……不可能。

于 2013-01-15T00:33:25.343 回答
7

好不容易，还是用JavaScript。

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

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

它应该给所有元素相同的高度。有关更多选项，请参阅完整的 Flex Box 布局规范。

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

于 2013-01-09T23:12:51.727 回答
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/

    • 于 2013-01-15T03:40:18.533 回答
    1

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

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

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

    于 2013-01-09T23:13:45.340 回答
    1

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

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

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

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

    于 2013-01-16T09:04:44.943 回答
    0

    从 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/

    于 2013-01-17T15:57:21.190 回答
    0

    对于 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);
    }
}
    于 2015-02-11T12:33:07.783 回答
    0

    为了使 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);
        }
    }
}
    于 2015-08-31T09:08:35.980 回答
    -1

    看看马修詹姆斯泰勒的这篇文章。用 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;
}
    于 2013-01-09T23:16:38.467 回答