CSS 3 DIVs in einer Reihe: 2 fix 1 auto adjust

Question

Ich versuche herauszufinden, wie 3 divs erstellen und sie in der gleichen Zeile haben. 1. und 3. eine feste Breite bei 100px haben und die 2. (mittlere) ein audo anpassen seine Breite im Falle der Browser-Größe ändern.

<div> 
    <div id="d1"> content 1</div> 
    <div id="d2"> content 2</div> 
    <div id="d3"> content 3</div> 
</div> 

Dank,

Answer 1

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

Streik, dass sind in der Höhe gleich viele zusätzliche divs alle Spalten zu gewährleisten. This may be what you're looking for. Alle in diesem ausgezeichneten Artikel erklärt: http://www.alistapart.com/articles/holygrail

Answer 2

Sie haben tp Verwendung schwimmt die linken und rechten Rahmen auszurichten. Dafür müssen Sie die divs wie unten gezeigt neu anordnen und die Ränder für das mittlere div festlegen.

<style type="text/css"> 
#d1 { 
    float: left; 
} 

#d2 { 
    float: right; 
} 

#d3 { 
    margin-left: 100px; 
    margin-right: 100px; 
} 
</style> 

<div> 
    <div id="d1"> content 1</div> 
    <div id="d2"> content 2</div> 
    <div id="d3"> content 3</div> 
</div> 

bearbeiten

Dank Leniel Macaferi für einen Fehler hinzuweisen. Die richtige Reihenfolge der div s muss schweben div s zuerst, dann nicht schwebend div s. Deshalb habe ich den Code korrigiert (getauscht div d2 und div d3).

Answer 3

NVM das ist alt, ich war im Begriff, Post, was für mich gearbeitet

<style type="text/css"> 
#d1 { 

    float: left; 
    margin-left: 50px; 

} 

#d2 { 
    float: center; 
    margin-right: 5px; 
} 

#d3 { 
float: left; 
margin-right: 5px; 
} 
</style> 

<div> 
    <div id="d1"> content 1</div> 
    <div id="d3"> content 3</div> 
    <div id="d2"> content 2</div> 
</div> 

Answer 4

Div ein Block-Element ist, so ist es eine gute Wahl mit der Handhabung Hilfe seiner Display-Eigenschaft.

<div id="d1" style="display:inline-block; width:100px;">content1</div> 
<div id="d2" style="display:inline">content2</div> 
<div id="d3" style="display:inline-block; width:100px;">content3</div>​ 

Answer 5

Genau dies setzen da draußen als eine moderne, saubere Lösung: calc verwenden. Fiddle: http://jsfiddle.net/bg7KS/

#d2 { 
    width: 200px; /* fallback older browsers */ 
    width: -webkit-calc(100% - 200px); 
    width: -moz-calc(100% - 200px); 
    width: calc(100% - 200px); 
}