Machen Sie links div nehmen Sie die verbleibende Breite ohne Swap-Elemente

Question

Ich habe 2 divs Seite an Seite. Das rechte div hat eine feste Breite. Das linke div sollte den verbleibenden Platz füllen, auch wenn die Größe des Fensters geändert wird. Beispiel:

+---------------------------------+ +---------------+ 
|         | |    | 
|    divLeft    | | divRight | 
|  <- dynamic width ->  | |  120px  | 
|         | |    | 
+---------------------------------+ +---------------+ 

<div> 
    <div id="divLeft">...</div> 
    <div id="divRight">...</div> 
<div> 

Es gibt a solution that uses float:right on the right element aber es erfordert Umordnung der Elemente wie folgt aus:

<div> 
    <div id="divRight" style="float: right; width: 120px;">...</div> 
    <div id="divLeft">...</div> 
<div> 

Gibt es eine Lösung, die nicht die Elemente Umordnung benötigt? Ich bin in einer Situation, in der das Nachbestellen andere Probleme verursachen wird. Ich würde eine CSS/HTML-Lösung bevorzugen, aber ich bin offen für die Verwendung von Javascript/JQuery.

Hier ist eine nicht funktionierende JSFiddle von meinem Versuch, es zu lösen. Ich versuche das blaue Div auf der rechten Seite des grünen Div zu positionieren.

Answer 1

Es ist zwar nicht mit < funktioniert = IE7 scheint display:table-cell den Trick zu tun:

#divLeft { 
    background-color: lightgreen; 
    vertical-align: top; 
    display:table-cell; 
} 
#divRight { 
    display:table-cell; 
    width: 120px; 
    background-color: lightblue; 
    vertical-align: top; 
} 

jsFiddle example

Answer 2

Verwenden Sie display:table und table-cell funktionieren gut dafür. Ich hatte eine Verpackung .container div hinzuzufügen, aber hier ist eine Lösung:

http://jsfiddle.net/NmrbP/2/

.container { 
    display:table; 
} 
#divLeft { 
    overflow: hidden; 

    background-color: lightgreen; 
    vertical-align: top; 
    display:table-cell; 
} 

#divRight { 
    width: 120px; 

    background-color: lightblue; 
    vertical-align: top; 
    display:table-cell; 
} 

Answer 3

Ist dies die Art der Sache? http://jsfiddle.net/KMchF/5/

#divLeft { 
    float: left; 
    overflow: hidden;  
    background-color: lightgreen; 
    vertical-align: top; 
    position: absolute; 
    right: 120px; 
} 

#divRight { 
    float: right; 
    width: 120px;  
    background-color: lightblue; 
    vertical-align: top; 
} 

Ich habe eine hinzugefügt Clearing div nach, so dass Sie mit dem Rest der Seite weitermachen können wie sonst Elemente unter sein die div { position: absolute; }

Answer 4

Sie dies mit Positionierung lösen können

#divLeft { 
    background-color: lightgreen; 
    width: 100px; 
} 
#divRight { 
    position: absolute; 
    top: 0; 
    left: 100px; 
    right: 0; 
    background-color: lightblue; 
} 
body { /* or parent element */ 
    position: relative;   
} 

Working fiddle

Answer 5

ich habe es wie folgt funktioniert: HTML:

<div id="divLeft"> 
    [divLeft] 
    Lorem ipsum dolor sit amet, omnes molestie repudiandae eos cu, doming dolorum nonumes has ad. Magna ridens et his, eripuit salutatus sententiae te ius. Ludus accumsan ea usu, ea sed meliore maiorum molestiae, has facer dolore ornatus ut. Eam adhuc platonem mnesarchum ad, mei autem fuisset electram ei. Hinc omnesque eu mei. Ut sit odio melius aperiri, ei mei legere eruditi.<br/> 

    Mel te sale vitae putant, diceret nusquam est an. Ad melius legimus vel. Eum dicam primis persecuti ea, ne alia unum partiendo nec. Ferri tollit docendi et pro, usu vide putant eirmod et. Qui an nostrud dolorum. Sea modo case fugit ea, mea te autem doming dolorum. 
</div> 

<div id="divRight"> 
    [divRight] 
    Sit no doctus invenire. Sint consequuntur mei ne, an mea perpetua omittantur conclusionemque. Quaestio platonem no pro. Mei choro oblique mandamus ea, dicat vivendo eloquentiam in eam. Ne pro velit ceteros.<br/> 

Quem consulatu te pro, albucius menandri et sit. Ne vis nibh nominavi atomorum. Eu pri enim omnes. Iisque vidisse cotidieque ius eu, in fierent dissentiet sed, cu eam sensibus honestatis. 
</div> 

CSS:

#divLeft { 
float: left; 
overflow: hidden; 
width: 80%; 
background-color: lightgreen; 
vertical-align: top; 
} 
#divRight { 
    float: right; 
    width: 15%; 

    background-color: lightblue; 
    vertical-align: top; 
} 

Arbeiten JSFiddle.

Answer 6

Versuchen Sie folgendes:

.div_left{ 
    width:100%; 
    height:100px; 
    position:absolute; 
    top:0px; 
    right:200px; 
} 
.div_right{ 
    width:200px; 
    height:100px; 
    float:right; 
    background-color:red; 
} 

Die richtige Attribut das linke div muss die Breite des rechten div sein und wenn diese divs innerhalb eines anderen divs sind, braucht dieses div s hat Überlauf: versteckt. In diesem Fall wird das rechte div auf der rechten Seite schweben und hat eine Breite von 200px und das linke div wird 200px vom rechten Rand platziert und trotz dessen hat es eine Breite von 100%, wenn es die Breite des Container div überschreitet, Der zugeschriebene Überlauf wird dieses Problem beheben.