I have 4 divs in a fixed width layout: a, b, c, and d, and they are ordered in the html like this:
<div id="a">
</div>
<div id="b">
</div>
<div id="c">
</div>
<div id="d">
</div>
Using 开发者_JS百科CSS, I want them to be laid out with divs a, b, and d in a vertical column, and div c to the right of and top-aligned with div b, like this:
aaa
aaa
aaa
bbbccc
bbbccc
bbbccc
ddd
ddd
ddd
I need this layout to work even though the divs contain unknown content, and so could be of varying length:
aaa
aaa
aaa
bbbccc
bbbccc
dddccc
dddccc
ddd
or:
aaa
aaa
aaa
bbbccc
bbb
bbb
ddd
ddd
ddd
or even (if possible):
aaa
aaa
bbbccc
dddccc
eeeccc
eee
I can't simply float div c to the right and then move it up, because, without using Javascript, I don't know the height of div b, and so don't know how much to move it up by.
Is this possible in HTML and CSS, without reordering the divs?
a { clear: both; } b { float: left; } c { float: right; } d, e { clear: left; }
Would probably solve it (not tested).
精彩评论