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

Question

Ich versuche herauszufinden, wie man 3 Divs erstellen und sie in derselben Zeile anordnen kann. Nachdem 1. und 3. eine feste Breite bei 100px und haben die 2. (Mitte) ein audo seine Breite im Falle der Browser-Größe anpassen.

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

danke,

Answer 1

Sie müssen den linken und rechten Rahmen mit Puffergrößen ausrichten. Dazu müssen Sie jedoch 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>

Modifier

Dank an Leniel Macaferi dass Sie auf einen Fehler hingewiesen haben. Die richtige Reihenfolge der div s muss schwebend sein div s, dann die nicht schwebenden div s. Deshalb habe ich den Code korrigiert (ausgetauscht div d2 und div d3).

Answer 2

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

Streichen Sie das, viele zusätzliche Divs, um sicherzustellen, dass alle Spalten gleich hoch sind. Dies könnte das sein, wonach Sie suchen. Das alles wird in diesem ausgezeichneten Artikel erklärt: http://www.alistapart.com/articles/holygrail

Answer 3

Div ist ein Block-Level-Element, so dass es eine gute Möglichkeit, mit Hilfe seiner Display-Eigenschaft zu behandeln.

<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 4

Ich möchte hier nur eine moderne, saubere Lösung vorschlagen: Verwenden Sie calc . Fiedel: http://jsfiddle.net/bg7KS/

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

Answer 5

Nvm das ist alt, ich wollte posten, was bei mir funktioniert hat

    <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>