3 divs mittleres div nehmen die restliche Breite auf

Question

In Ordnung, Leute, ich habe meine Bälle über diesen einen gesprengt.

Ich habe drei divs; links, Mitte, rechts. Alle 100% Höhe. Das linke und rechte div haben eine feste Breite von 150px. Jetzt möchte ich, dass der mittlere Teil den verbleibenden Platz einnimmt.

Beispiel: Here

CSS:

#left { 
    height:100%; 
    width:150px; 
    float:left; 
    background:red; 
    z-index:999; 
} 
#middle { 
    height:100%; 
    width:100%; 
    background:yellow; 
    margin-left:-150px; 
    margin-right:-150px; 
} 
#right { 
    float:right; 
    height:100%; 
    width:150px; 
    background:red; 
    z-index:998; 
} 

Answer 1

Verwendung display: table:

#container { 
    display: table; 
    width: 100%; 
} 

#left, #middle, #right { 
    display: table-cell; 
} 

#left, #right { 
    width: 150px; 
} 

Wo die #container Ihr übergeordnetes Element ist wie in

<div id="container"> 
    <div id="left"></div> 
    <div id="middle"></div> 
    <div id="right"></div> 
</div> 

Hier ist eine Fiddle.

Answer 2

prüfen diese similar answer

HTML

<div class = "container"> 
    <div class = "fixed"> 
     I'm 150px wide! Glee is awesome! 
    </div> 
    <div class = "fluid"> 
     I'm fluid! Glee is awesome! 
    </div> 
    <div class = "fixed">   
     I'm 150px wide! Glee is awesome! 
    </div> 
</div> 

CSS

html, body { 
    height: 100%; 
    font-family: 'Arial', 'Helvetica', Sans-Serif; 
} 
.container { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
.container > div { 
    display: table-cell; 
    text-align: center; 
} 
.fixed { 
    width: 150px; 
    background: rgb(34, 177, 77); 
    color: white; 
} 
.fluid { 
    background: rgb(0, 162, 232); 
} 

DEMO

Answer 3

Wenn Sie keine Tabellenzellen verwenden und Ihren äußeren Feldern keine feste Breite zuweisen möchten (statt dessen ihre Breite durch ihren Inhalt zu bestimmen, können Sie die Methode overflow-hidden und float verwenden)

Das Schlimme an dieser Methode ist, dass Sie einen Überlauf halten auf Ihrem divs versteckt zu haben, und auch müssen Sie Ihre divs in einer rückwärts Weise anordnen (siehe unten)

DEMO

HTML

<div class='container'> 

    <div class='third-box'>Third</div> 

    <div class='first-second'> 
     <div class='first-box'>First</div> 
     <div class='second-box'>Second</div> 
    </div> 

</div> 

CSS

.container { 
    width: 400px; 
} 

.first-second { 
    overflow: hidden; 
} 

.first-box { 
    float: left; 
    background-color: coral; 
} 

.second-box { 
    overflow: hidden; 
    background-color: aquamarine; 
} 

.third-box { 
    float: right; 
    background-color: salmon; 
} 

Answer 4

Gut flex mit und basierend this answer

#parent { 
 
    display: flex; 
 
} 
 
#left { 
 
    width:150px; 
 
    background-color:#ff0000; 
 
} 
 
#middle { 
 
    flex: 1 1 auto; 
 
    background-color:#00ff00; 
 
} 
 
#right { 
 
    width: 150px; 
 
    background-color:#0000ff; 
 
}

<div id="parent"> 
 
    <div id="left">left</div> 
 
    <div id="middle">middle</div> 
 
    <div id="right">right</div> 
 
</div>

Das funktioniert, wenn die linken und rechten divs auch variable Breite hat.