0
我該如何製作與bbb + ccc相同高度的列作爲aaa,ddd列?div列高度
<html><body>
<div style="width:500px;height:500px;background-color:yellow">
<div style="float:left;height:100%;background-color:green;">
aaa
</div>
<div style="float:left;height:100%;background-color:#ff00ff">
<div style='background-color:cyan;height:25px;'>
bbb
</div>
<div style="background-color:gray;height:100%;">
ccc
</div>
</div>
ddd
</div>
</body></html>
嚴重的是,只用一個''
。 (除非你沒事了一些非標準或CSS3-4的東西。) – Ryan2012-04-27 18:58:08回答
什麼你希望做的是不完全做 - 無需使用表格即可在CSS中使用。你可以做的下一件事是做一個「虛擬專欄」。
http://jsfiddle.net/3wXv2/
更新HTML(拿出內嵌CSS和添加簡單的類名)
CSS
「招」 就是那個容器 「列」( Div.bc包含了堆疊div .b和.c),就像「人造色彩」一樣,它基本上讓人覺得「C」的背景實際上是在延伸但事實並非如此。
你可以從這個優秀的資源瞭解人造列:
http://www.alistapart.com/articles/fauxcolumns/
有問題 「的高度:100%;」是這個聲明是而不是說「伸展到列的剩餘高度」。
它說:「讓我的高度等於我的父母的高度的100%!」。
這意味着,它看起來在父容器(在這種情況下.BC),並且將它的高度=到該高度。如果你看看你的CSS,它會顯示.bc爲100%的高度,它可以做同樣的事情。它使它的height = .wrap設置爲500px。
所以......柱「.c」的設置爲500像素,而不是‘500px的 - 無論其他人在列’,因爲CSS只是不工作的方式由它的規則。
當然,如果你碰巧有「div.c」比其餘柱高含量較高,這將可能打破。
我希望有幫助。
乾杯!
來源
2012-04-27 19:14:38 jmbertucci
一個側面說明,CSS3有一種叫做「Flexbox的」(http://www.html5rocks.com/en/tutorials/flexbox/quick/)它還沒有很好的支持(http://caniuse.com/#search=flex)。 – jmbertucci 2012-05-02 13:16:39
看到這個更新小提琴:http://jsfiddle.net/WD94e/1/。
你只需要改變「BBB」的高度和「CCC」欄目,使他們增加了100%,總:
來源
2012-04-27 19:11:48
相關問題