it-swarm.com.de

CSS zwei Divs nebeneinander

Ich möchte zwei <div>s nebeneinander. Das Recht <div> ist ungefähr 200px; und der linke <div> muss den Rest der Bildschirmbreite ausfüllen? Wie kann ich das machen?

213
Martijn

Sie können flexbox verwenden, um Ihre Artikel zu gestalten:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}
<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Dies ist im Grunde nur die Oberfläche der Flexbox kratzen. Flexbox kann ziemlich erstaunliche Dinge tun.


Für die Unterstützung älterer Browser können Sie CSS-Eigenschaften float und width verwenden um es zu lösen.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}
<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>
400
M.N

Ich weiß nicht, ob dies noch ein aktuelles Problem ist oder nicht, aber ich bin auf dasselbe Problem gestoßen und habe das CSS display: inline-block; Etikett. Verpacken Sie diese in einem div, damit sie richtig positioniert werden können.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

Beachten Sie, dass die Verwendung des Inline-Stilattributs nur für die Prägnanz dieses Beispiels verwendet wurde. Natürlich wurden diese in eine externe CSS-Datei verschoben.

134
russholio

Leider ist dies keine triviale Lösung für den allgemeinen Fall. Am einfachsten wäre es, eine CSS-ähnliche Eigenschaft "float: right" hinzuzufügen. für dein 200px div würde dies jedoch auch dazu führen, dass dein "main" -Div tatsächlich die volle Breite hat und jeglicher Text dort um den Rand des 200px-div schwebt, was je nach Inhalt oft seltsam aussieht (so ziemlich) in allen Fällen, außer wenn es sich um ein schwebendes Bild handelt).

BEARBEITEN: Wie von Dom vorgeschlagen, könnte das Umhüllungsproblem natürlich mit einem Spielraum gelöst werden. Wie dumm von mir.

27
falstro

Die von @roe und @MohitNanda vorgeschlagene Methode funktioniert, aber wenn das richtige Div als float:right;, dann muss es erst in der HTML-Quelle kommen. Dies unterbricht die Lesereihenfolge von links nach rechts, was verwirrend sein kann, wenn die Seite mit deaktivierten Stilen angezeigt wird. In diesem Fall ist es möglicherweise besser, ein Wrapper-Div und eine absolute Positionierung zu verwenden:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

Gezeigt:

Edit: Hmm, interessant. Das Vorschaufenster zeigt die korrekt formatierten Divs an, das gerenderte Post-Item jedoch nicht. Tut mir leid, dann musst du es selbst ausprobieren.

18
David Hanak

Ich bin heute auf dieses Problem gestoßen. Basierend auf den obigen Lösungen hat dies für mich funktioniert:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

Lasse das übergeordnete Div einfach die gesamte Breite überspannen und schwimme die darin enthaltenen Divs.

15
Wickyd

[~ # ~] Update [~ # ~]

Wenn Sie Elemente in einer Reihe platzieren müssen, können Sie Flex Layout verwenden. Hier haben Sie ein weiteres Flex-Tutorial . Es ist ein großartiges CSS-Tool und obwohl es nicht zu 100% kompatibel ist, wird es von Tag zu Tag besser nterstützung . Das funktioniert so einfach wie:

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

Und was Sie hier bekommen, ist ein Container mit einer Gesamtgröße von 4 Einheiten, die den Raum mit ihren Kindern in einem Verhältnis von 1/4 und 3/4 teilen.

Ich habe ein Beispiel in CodePen erstellt, das Ihr Problem löst. Ich hoffe, es hilft.

http://codepen.io/timbergus/pen/aOoQLR?editors=11

SEHR ALT

Vielleicht ist das nur ein Unsinn, aber haben Sie es mit einem Tisch versucht? Es wird kein direktes CSS zum Positionieren der divs verwendet, aber es funktioniert einwandfrei.

Sie können eine 1x2-Tabelle erstellen und Ihr divs hineinlegen und dann die Tabelle mit CSS formatieren, um sie wie gewünscht zu platzieren:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Hinweis

Wenn Sie die Verwendung der Tabelle vermeiden möchten, können Sie float: left; Und float: right; Verwenden. Vergessen Sie im folgenden Element nicht, clear: left;, clear: right; Oder clear: both;, Um die Position bereinigen zu lassen.

8
Timbergus
div1 {
    float: right;
} 
div2 {
    float: left;
}

Dies funktioniert in Ordnung, solange Sie clear: both für das Element, das diesen zweispaltigen Block trennt.

6
ccpizza

Ich bin auf dasselbe Problem gestoßen und Mohits Version funktioniert. Wenn Sie Ihre Links-Rechts-Reihenfolge im HTML-Code beibehalten möchten, versuchen Sie dies einfach. In meinem Fall passt der linke Teil die Größe an, der rechte Teil bleibt bei der Breite 260px.

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

Der Trick besteht darin, ein rechtes Polster auf dem Hauptfeld zu verwenden, dieses Feld jedoch erneut zu verwenden, indem Sie das rechte Feld erneut mit dem rechten Rand platzieren.

4
andreas

Ich benutze eine Mischung aus float und overflow-x: hidden. Minimaler Code, funktioniert immer.

https://jsfiddle.net/9934sc4d/4/ - PLUS Sie müssen Ihren Schwimmer nicht löschen!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}
2

Dies ist nicht die Antwort für alle, da dies in IE7- nicht unterstützt wird. Sie können es jedoch verwenden und dann eine alternative Antwort für IE7- verwenden. Es ist display: table, display: table-row und display: table-cell. Beachten Sie, dass hierbei keine Tabellen für das Layout verwendet werden, sondern dass Divs so gestaltet werden, dass die Dinge ohne all den Ärger von oben in eine schöne Linie geraten. Meins ist eine HTML5-App, also funktioniert es großartig.

Dieser Artikel zeigt ein Beispiel: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

So sieht Ihr Stylesheet aus:

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

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }
2
dwaz

Wie alle darauf hingewiesen haben, setzen Sie dazu ein float:right; auf den RHS-Gehalt und eine negative Marge auf dem LHS.

Wenn Sie jedoch kein float: left; auf der LHS (wie Mohit) erhalten Sie dann einen Stepping-Effekt, da die LHS-Div immer noch den Randbereich im Layout beansprucht.

Wenn dies nicht akzeptabel ist, müssen Sie einen untergeordneten Knoten mit definierter Breite einfügen. An diesem Punkt haben Sie möglicherweise auch die Breite für den übergeordneten Knoten definiert.

David weist jedoch darauf hin, dass Sie die Lesereihenfolge des Markups ändern können, um die LHS-Float-Anforderung zu vermeiden. Dies hat jedoch Probleme mit der Lesbarkeit und möglicherweise mit der Barrierefreiheit.

Allerdings kann dieses Problem gelöst mit Floats mit einigem zusätzlichen Markup sein

(Warnung: Ich bin mit dem .clearing div in diesem Beispiel nicht einverstanden, siehe hier für Details)

Alles in allem denke ich, dass sich die meisten von uns wünschen, dass es eine nicht gierige Breite gibt: in CSS3 bleiben ...

2
annakata