2

スタイルのある 3 つの div がありdisplay:inline-blockます。height値が最も高いものと一致するように値を設定したいと思います。また、高さの値を自動に設定したいと思います。以下に取得したいものを視覚的に表示しようとしました。これは純粋なCSSで可能ですか?

-----    -----    -----          -----    -----    ----- 
|   |    |   |    |   |          |   |    |   |    |   | 
-----    |   |    |   |    ==>   |   |    |   |    |   |
         -----    |   |          |   |    |   |    |   |
                  -----          -----    -----    -----
4

2 に答える 2

4

CSS を使用すると、内側の div を にdisplay: table-cell、外側のdiv を に設定できます。display: table

デモ: http://jsfiddle.net/maniator/C2dNu/

HTML:

<div id='out'>
    <div class='red'></div>
    <div class='blue'></div>
    <div class='green'></div>
</div>

CSS:

.red { 
    background: red;
    height: 60px;
}
.blue { 
    background: blue;
    height: 160px; 
}
.green {
    background: green;
    height: 80px; 
}
#out {
    display: table;
    width: 500px;
}

#out > div {
    display: table-cell;
    width: 33%;
}
于 2013-08-21T13:20:08.850 に答える
-1

JS ならEqualize.jsでできます。ただし、純粋なCSSソリューションはわかりません。

于 2013-08-21T13:13:37.097 に答える