Wie man div nebeneinander platziert

Ich habe ein Haupt-Wrapper-Div, das auf 100% Breite eingestellt ist. Darin möchte ich zwei Divs haben, einen mit fester Breite und einen, der den Rest des Raumes ausfüllt. Wie schwebe ich die zweite Div, um den Rest des Raumes zu füllen. Vielen Dank für jede Hilfe.

Es gibt viele Möglichkeiten, das zu tun, wonach Sie fragen:

1. Verwenden der CSS- floatEigenschaft :

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>
   

2. Verwenden der CSS- displayEigenschaft , mit der divs wie folgt wirken kann table:

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>
   

Es gibt mehr Methoden, aber diese beiden sind die beliebtesten.

CSS3 führte flexible Boxen (auch bekannt als Flexbox) ein, mit denen dieses Verhalten ebenfalls erreicht werden kann.

Definieren Sie einfach die Breite des ersten Divs und geben Sie dem zweiten einen flex-growWert, mit 1dem er die verbleibende Breite des übergeordneten Divs ausfüllen kann.

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

jsFiddle-Demo

Beachten Sie, dass Flexboxen nicht abwärtskompatibel mit alten Browsern sind, sondern eine hervorragende Option für die Ausrichtung auf moderne Browser darstellen (siehe auch Caniuse und MDN ). Eine umfassende Anleitung zur Verwendung von Flexboxen finden Sie unter CSS-Tricks .

Ich weiß nicht viel über HTML- und CSS-Designstrategien, aber wenn Sie nach etwas Einfachem suchen, das automatisch auf den Bildschirm passt (so wie ich), ist es meiner Meinung nach die einfachste Lösung, die Divs dazu zu bringen, sich wie Wörter in zu verhalten ein Absatz. Versuchen Sie es mit Angabedisplay: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

Möglicherweise müssen Sie die Breite der DIVs angeben oder nicht

Sie können das CSS-Raster verwenden, um dies zu erreichen. Dies ist die Langhandversion zu Illustrationszwecken:

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

Oder die traditionellere Methode mit Float und Margin.

Ich habe in diesem Beispiel eine Hintergrundfarbe eingefügt, um zu zeigen, wo sich die Dinge befinden - und was mit Inhalten unterhalb des schwebenden Bereichs zu tun ist.

Setzen Sie Ihre Stile nicht in das wirkliche Leben ein, sondern extrahieren Sie sie in ein Stylesheet.

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

Geben Sie dem ersten Div einen Float links und fixiert mit, dem zweiten Div 100% Breite einen Float links. Das sollte den Trick machen. Wenn Sie Elemente darunter platzieren möchten, benötigen Sie ein klares: beides auf dem Element, das Sie darunter platzieren möchten

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

Dies ist browserübergreifend kompatibel. Ohne den linken Rand treten Probleme mit Inhalten auf, die ganz nach links verlaufen, wenn Ihr Inhalt länger als Ihre Seitenleiste ist.

Wenn Sie IE6 nicht mit Tags versehen, schweben Sie den zweiten <div>und geben Sie ihm einen Rand, der <div>der festen Breite des ersten entspricht (oder vielleicht etwas größer als dieser ist) .

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

Der Rand berücksichtigt die Möglichkeit, dass der "Rest des Raums" <div>mehr Inhalt enthält als die "feste Breite" <div>.

Geben Sie der festen Breite keinen Hintergrund. Wenn Sie diese sichtbar als unterschiedliche "Spalten" sehen müssen, verwenden Sie den Trick " Faux Columns" .