Ich möchte ein zweispaltiges Div-Layout, bei dem jedes eine variable Breite haben kann, z

div {
  float: left;
}

.second {
  background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

Ich möchte, dass das 'view'-Div auf die gesamte verfügbare Breite erweitert wird, nachdem das' tree'-Div den benötigten Platz gefüllt hat.

Derzeit wird die Größe meines 'view'-Div auf den Inhalt geändert, den es enthält. Es ist auch gut, wenn beide Divs die gesamte Höhe einnehmen.

Haftungsausschluss nicht doppelt:

• Erweitern Sie div auf max width, wenn float: left gesetzt ist, da dort die linke eine feste Breite hat.
• Hilfe bei div - passe div an die verbleibende Breite an, da ich zwei Spalten benötige, die beide nach links ausgerichtet sind

Die Lösung dieses Problems ist eigentlich sehr einfach, aber nicht bei allen offensichtlich. Sie müssen einen sogenannten "Block Formatierungskontext" (BFC) auslösen, der auf bestimmte Weise mit Floats interagiert.

Nehmen Sie einfach das zweite Div, entfernen Sie den Schwimmer und geben Sie ihn overflow:hiddenstattdessen. Jeder andere als der sichtbare Überlaufwert macht den Block, auf den er gesetzt ist, zu einem BFC. BFCs erlauben weder Nachkommen-Floats, ihnen zu entkommen, noch erlauben sie Geschwister- / Ahnen-Floats, in sie einzudringen. Der Nettoeffekt hier ist, dass das schwebende Div seine Sache macht, dann wird das zweite Div ein gewöhnlicher Block sein, der die gesamte verfügbare Breite außer der vom Float belegten einnimmt .

Dies sollte in allen aktuellen Browsern funktionieren, obwohl Sie möglicherweise hasLayout in IE6 und 7 auslösen müssen. Ich kann mich nicht erinnern.

Demos:

• Links behoben : http://jsfiddle.net/A8zLY/5/
• Feste Rechte: http://jsfiddle.net/A8zLY/2/

Ich habe gerade die Magie der Flexboxen entdeckt (Anzeige: Flex). Versuche dies:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

Flexboxen geben mir die Kontrolle, die ich mir seit 15 Jahren gewünscht habe. Es ist endlich da! Weitere Informationen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox-Lösung

Dafür ist die flex-growImmobilie da.

html, body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}

<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>

Hinweis: Fügen Sie bei Bedarf von Ihren unterstützten Browsern Präfixe für Flex-Anbieter hinzu .

Dies wäre ein gutes Beispiel für etwas, das mit Tabellen trivial und mit CSS schwer (wenn nicht unmöglich, zumindest im Sinne eines Cross-Browsers) zu tun hat.

Wenn beide Spalten eine feste Breite hätten, wäre dies einfach.

Wenn eine der Spalten eine feste Breite hätte, wäre dies etwas schwieriger, aber durchaus machbar.

Wenn beide Spalten eine variable Breite haben, müssen Sie meiner Meinung nach nur eine zweispaltige Tabelle verwenden.

Überprüfen Sie diese Lösung

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

Verwendung calc:

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

Das Problem dabei ist, dass alle Breiten explizit definiert werden müssen, entweder als Wert (px und em funktionieren einwandfrei) oder als Prozentsatz von etwas, das explizit selbst definiert wurde.

Hier könnte dies helfen ...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

Ich verstehe nicht, warum die Leute bereit sind, so hart zu arbeiten, um eine reine CSS-Lösung für einfache Spaltenlayouts zu finden, die mit dem alten TABLETag SO EINFACH sind .

Alle Browser haben immer noch die Logik des Tabellenlayouts ... Nennen Sie mich vielleicht einen Dinosaurier, aber ich sage, lassen Sie es Ihnen helfen.

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

Auch in Bezug auf die Cross-Browser-Kompatibilität viel weniger riskant.

Wenn die Breite der anderen Spalte festgelegt ist, können Sie die calcCSS-Funktion für alle gängigen Browser verwenden :

width: calc(100% - 20px) /* 20px being the first column's width */

Auf diese Weise wird die Breite der zweiten Reihe berechnet (dh die verbleibende Breite) und entsprechend angewendet.

Sie können CSS Grid Layout ausprobieren .

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

Flex-Grow - Dies definiert die Fähigkeit eines Flex-Elements, bei Bedarf zu wachsen. Es akzeptiert einen Wert ohne Einheit, der als Anteil dient. Es bestimmt, wie viel Platz im Flex-Container der Artikel einnehmen soll.

Wenn für alle Elemente Flex-Grow auf 1 gesetzt ist, wird der verbleibende Platz im Container gleichmäßig auf alle untergeordneten Elemente verteilt. Wenn eines der Kinder den Wert 2 hat, nimmt der verbleibende Speicherplatz doppelt so viel Speicherplatz ein wie die anderen (oder es wird zumindest versucht). Sehen Sie hier mehr

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}

<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

Eine etwas andere Implementierung,

Zwei Div-Panels (Inhalt + Extra) nebeneinander werden content panelerweitert, wennextra panel nicht vorhanden sind.

jsfiddle: http://jsfiddle.net/qLTMf/1722/

Pat - Du hast recht. Deshalb würde diese Lösung sowohl "Dinosaurier" als auch Zeitgenossen zufriedenstellen. :) :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}

<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

Sie können die CSS-Bibliothek von W3 verwenden, die eine Klasse mit dem Namen enthält rest, die genau das tut:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

Vergessen Sie nicht, die CSS-Bibliothek auf den folgenden Seiten zu verknüpfen header:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Hier ist die offizielle Demo: W3 School Tryit Editor

Ich bin mir nicht sicher, ob dies die Antwort ist, die Sie erwarten, aber warum setzen Sie die Breite von Tree nicht auf 'auto' und die Breite von 'View' auf 100%?

Schauen Sie sich die verfügbaren CSS-Layout-Frameworks an. Ich würde Simpl oder das etwas komplexere Blueprint-Framework empfehlen .

Wenn Sie Simpl verwenden (bei dem nur eine simpl.css- Datei importiert wird ), können Sie Folgendes tun:

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

für ein 50-50-Layout oder:

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

für einen 25-75.

So einfach ist das.

Danke für den Plug von Simpl.css!

Denken Sie daran, alle Ihre Spalten ColumnWrapperso einzuschließen.

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

Ich bin im Begriff, Version 1.0 von Simpl.css zu veröffentlichen, also helfen Sie, das Wort zu verbreiten!

Ich habe eine Javascript-Funktion geschrieben, die ich von jQuery $ (document) .ready () aus aufrufe. Dadurch werden alle untergeordneten Elemente des übergeordneten div analysiert und nur das am weitesten rechts stehende untergeordnete Element aktualisiert.

html

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

Javascript

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

Dies ist mit Flexbox ziemlich einfach. Siehe den Ausschnitt unten. Ich habe einen Wrapper-Container hinzugefügt, um den Fluss zu steuern und eine globale Höhe festzulegen. Es wurden auch Rahmen hinzugefügt, um die Elemente zu identifizieren. Beachten Sie, dass Divs jetzt bei Bedarf auch auf die volle Höhe erweitert werden. Herstellerpräfixe sollten in einem realen Szenario für Flexbox verwendet werden, da dies noch nicht vollständig unterstützt wird.

Ich habe ein kostenloses Tool entwickelt, um Layouts mithilfe von Flexbox zu verstehen und zu entwerfen. Überprüfen Sie es hier: http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}

<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

Wenn beide Breiten variabel sind, warum berechnen Sie die Breite nicht mit Skripten oder Serverseiten?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>