html - 可変高さのコンテンツを持つ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を使用して、「1つの」divを同じ高さにし（動的である必要があります）、最も高い列に基づいて3つの列すべてを同じ高さにする方法はありますか？別の言い方をすれば、すべての「1つの」divを同じ高さにしたいのですが、「3つの」divの高さを伸ばすことで、すべての列も同じ高さにする必要があります。残念ながら、私が使用しているプラ​​グインのため、それらはliアイテムのままにする必要があります。これはjavascriptでかなり簡単に達成できると思いますが、可能であればcssソリューションを探しています。（警告、IE7で動作する必要があります）それが理にかなっていて感謝していることを願っています！

Answer 1

IE7の場合?

そして純粋なCSS？

すべての行 1 (Div "one") は同じ高さですか?

そして、すべての列は同じ高さですか？

答えは... 不可能です。

Answer 2

非常に困難であるか、JavaScript を使用しています。

これは、Flex Box Layout が設計された目的の 1 つです。したがって、次のようなものになります。

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

そして、すべての要素に同じ高さを与える必要があります。その他のオプションについては、フレックス ボックス レイアウトの完全な仕様を参照してください。

適切なベンダー プレフィックスがあることを確認してください。

Answer 3

What you need isn't possible without some HTML changes.

A possible alternative, with some HTML changes, is to threat the element as a table, the

as a table row and the as a table cell. You will need to have all elements in the same row (li) and an extra li element as the footer

For example:

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

You can take a look here: http://jsfiddle.net/WffHD/25/

Answer 4

編集後。height を使用する代わりに、vertical-align を使用してください。(CSS テーブルで動作します)

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

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

Answer 5

この質問には 2 つの注意点があります:
1-liの高さが
等しい 2- 最初の div の高さが等しい

ここに最初のステップ
があります: 有効であり、IE6+ でうまく動作する (私は以前にテストしたことがあります) が、少しの勇気とマークアップが必要な、シンプルだがトリッキーな純粋な css ソリューションがあります。
最初：

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

列の高さを非常に高くしてから、隠しオーバーフローでそれらを切り落とし、次に大量の下部パディングで列の高さを強制し、再びラッパーの高さを減らすのは非常に簡単です。同量の負の下部マージンでバックアップします。これにより、必要な効果が得られます。
そして、2番目の部分について、私が本当に達成できる唯一の方法は、それらを構造から切り離し、上記のような別の構造に配置することだけです。そのため、少しcssマジックを使用すると、両方が1つの構造にすぎないように見えます(これには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

マシュー・ジェームス・テイラーによるこの投稿を見てください。CSSでそれを行うのはちょっと複雑です。しかし、それが唯一の「良い」方法です。JavaScript を使用して最も高い列を計算し、この高さを他の 2 つに適用することもできます。

次のようなコンテナがいくつか必要です。

<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;
}