0

I'm trying to achieve the reverse of what has been asked here: CSS columns: both fluid and flexible in width
I tried playing with the solution there, but I couldn't get it to work.

I have a div container. This container should hold 2 divs, side-by-side in 2-column fashion, that I would like to fill the width of the container. The widths are not known in advance. However the left div should take precedence, in terms of allocated width, over the right div. The right div can then have the leftover width.

The left column div holds an img element (although I don't know if that's relevant). The right column div holds two child divs, stacked in block fashion. The one on the bottom holds a div-table (although again, I don't known if that's relevant). It seems to me that it's really the same problem as posted in the question above, but just reversed.

I've made attempts at floating the left div "left", and floating the right div "right", but my right div always breaks onto a new line, appearing below the left div. There's nothing contained within the right div that would push the whole thing onto a new line (like child elements with 100% width).

Can anyone help me?

4

1 回答 1

1

Simply setting float to left should achieve what you are looking for from the original example.

http://jsfiddle.net/vpADP/45/

HTML:

<div id="buttonDiv">button div as wide as text</div>
<div id="rightDiv">
    left div<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus  rutrum mi ut vehicula. Praesent vitae quam ut metus sollicitudin dapibus  ac in lectus. Praesent sit amet justo vitae leo venenatis ornare id at  felis. Etiam vel magna velit, a lacinia orci. Pellentesque lectus nibh,  mollis tempus bibendum venenatis, molestie ut nibh. Aliquam faucibus  aliquam eros, sit amet dignissim libero vestibulum vitae. Mauris nec  odio mauris, in sollicitudin ante. Vestibulum ut quam ac quam suscipit  luctus. In vitae enim orci. Ut consectetur consectetur lacus. 
</div>

CSS:

#rightDiv {
    background: #ccc;
    overflow: hidden
}
#buttonDiv {
    background: #f0f;
    float: left
}
于 2013-10-29T03:12:49.580 回答