Keep floating divs on same line

问题

How do i keep two elements in the same row with fixed right column? I want right div to be with fixed size, and left column fluid, but when in insert long text to left one, then right one goes to the next column..

Example: http://jsfiddle.net/Jbbxk/2/

Is there any pure CSS solutions?

NB! Wrap div must have dynamic width! For demostration purposes it has fixed witdh, so it will wrap.

Cheers!

回答1:

This is one common way of doing what you want:

.wrap {
    position: relative;
    margin: 5px;
    border: 1px solid red;
}
.left {
    float: left;
    background-color: #CCC;
    margin-right: 48px;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background-color: #888;
}

Explanation:

The fluid left column fills the whole width but saves space for the right column with margin-right: [right column width];
The fixed right column is placed at an absolute position at top 0, right 0 (its correct place)
The wrap div is assigned position: relative so the right column position is determined according to it.

回答2:

It's actually easier than I thought, just remove the float:left; from the left class and put your right floating items above them in the HTML

update fiddle

回答3:

Here is another solution. Set display: table-cell;

http://jsfiddle.net/Jbbxk/54/

.left {
    /*display: left;*/
    display: table-cell;
}
.right {
    float: right;
    display: table-cell;
}

Also, the floating div comes first:

<div class="right">
    &nbsp;
</div>
<div class="left">
    Looooooooong content - pushes right to next row<br>
    NOT OK
</div>

回答4:

You can do

.left {
    max-width: 152px;
}

回答5:

as you have dynamics width, use % like

.left {
float: left;
background-color: #CCC;
width:75%;
}

I have updated the fiddle link : http://jsfiddle.net/Jbbxk/6/

来源：https://stackoverflow.com/questions/11450962/keep-floating-divs-on-same-line

标签

html

css

css-float