CSS zwei Divs nebeneinander

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

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 das Abkratzen der Oberfläche der Flexbox. Flexbox kann ziemlich erstaunliche Dinge tun.

Für die Unterstützung älterer Browser können Sie CSS- Float und eine Breite verwenden, um das Problem 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>

Ich weiß nicht, ob dies immer noch ein aktuelles Problem ist oder nicht, aber ich bin auf dasselbe Problem gestoßen und habe das CSS- display: inline-block;Tag verwendet. Wickeln Sie diese in ein 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. Diese werden natürlich in eine externe CSS-Datei verschoben.

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

EDIT: Wie von Dom vorgeschlagen, könnte das Verpackungsproblem natürlich mit einem Rand gelöst werden. Wie dumm von mir.

Die von @roe und @MohitNanda vorgeschlagene Methode funktioniert, aber wenn das richtige div als festgelegt ist float:right;, muss es zuerst in der HTML-Quelle stehen. 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-Element jedoch nicht. Entschuldigung, dann müssen Sie es selbst versuchen.

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> 

Stellen Sie einfach sicher, dass das übergeordnete Div die gesamte Breite überspannt und die darin enthaltenen Divs schweben.

AKTUALISIEREN

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 100% kompatibel ist, wird seine Unterstützung von Tag zu Tag besser. Dies 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, der den Raum mit seinen Kindern in einem Verhältnis von 1/4 und 3/4 teilt.

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

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

SEHR ALT

Vielleicht ist das nur ein Unsinn, aber haben Sie es mit einem Tisch versucht? Es verwendet nicht direkt CSS zum Positionieren der Divs, aber es funktioniert gut.

Sie können eine 1x2-Tabelle erstellen und Ihre divs Innenseite die Tabelle dann mit CSS formatieren, um sie wie gewünscht einzufügen:

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

Hinweis

Wenn Sie die Verwendung der Tabelle wie oben erwähnt vermeiden möchten, können Sie float: left;und float: right;und im folgenden Element nicht vergessen, ein oder hinzuzufügen clear: left;, um die Position zu bereinigen.clear: right;clear: both;

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

Dies funktioniert einwandfrei, solange Sie clear: bothdas Element festlegen , das diesen zweispaltigen Block trennt.

Ich bin auf das gleiche 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 das linke Div die Größe an, das rechte Div 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, eine rechte Polsterung auf der Hauptbox zu verwenden, diese jedoch erneut zu verwenden, indem die rechte Box erneut mit dem rechten Rand platziert wird.

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 räumen!

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

Wie alle darauf hingewiesen haben, setzen Sie dies float:right;auf den RHS-Inhalt und einen negativen Rand auf den LHS.

Wenn Sie jedoch kein a float: left;auf der LHS verwenden (wie es Mohit tut), erhalten Sie einen Stufeneffekt, da die LHS-Div immer noch den Randbereich im Layout belegt.

Der LHS-Float wird den Inhalt jedoch verkleinern, sodass Sie einen untergeordneten Knoten mit definierter Breite einfügen müssen, wenn dies nicht akzeptabel ist. An diesem Punkt können Sie auch die Breite auf dem übergeordneten Knoten definiert haben.

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

Dieses Problem kann jedoch mit Floats gelöst werden, wenn ein zusätzliches Markup vorliegt

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

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

Dies ist nicht die Antwort für alle, da es in IE7- nicht unterstützt wird. Sie können es jedoch verwenden und dann eine alternative Antwort für IE7- verwenden. Es ist Anzeige: Tabelle, Anzeige: Tabellenzeile und Anzeige: Tabellenzelle. Beachten Sie, dass hierfür keine Tabellen für das Layout verwendet werden, sondern Divs so gestaltet werden, dass die Dinge ohne den ganzen Aufwand von oben gut aufeinander abgestimmt sind. 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;
 }

Um eine meiner Websites zu paraphrasieren, die etwas Ähnliches tut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

Verwenden Sie einfach einen Z-Index und alles wird gut sitzen. Stellen Sie sicher, dass die Positionen als fest oder absolut markiert sind. dann bewegt sich nichts so wie bei einem float-tag.