it-swarm.com.de

2 Divs nebeneinander ausgerichtet, wie wird die Breite des Div-Füllers zu 100% gemacht?

Ich frage mich, was der beste Weg ist, dies zu tun, ist ...

Ich habe 3 divs:

  • ein div#container mit width=100%;, der 2 innere divs enthält

  • ein div#inner_left mit width, der sich dynamisch ändert, jedoch nicht breiter als 200px ist (wird ein Produktbild enthalten)

  • ein div#inner_right, wobei die Breite den Rest des Platzes im Container ausfüllen soll (enthält Text, der das angezeigte Produkt beschreibt)

    #container {
       width:100%
    }
    
    #inner_left {
        display:inline-block:
        max-width:200px;
    }
    
    #inner_right {
        display:inline-block;
        width:100%; 
    }
    

Das Problem ist, dass der div#inner_right einen Zeilenumbruch erstellt und die gesamte Breite ausfüllt. Wie kann ich sie nebeneinander ausrichten lassen, wobei die rechte div die Breite berücksichtigt, die die linke div nimmt (die sich dynamisch ändert?). Ich habe es auf andere Weise bekommen, aber ich suche nach einer sauberen Lösung ...

Jede Hilfe für ein CSS-Noob wird sehr geschätzt!

39
thedeepfield

Schauen Sie sich " flüssige Layouts an" es kann beschreiben, worüber Sie sprechen.

Sie suchen wahrscheinlich nach dieses .

Versuchen Sie in Ihrem Beispiel, Ihre Anzeige auf Inline einzustellen. Sie können Block-Level-Elemente jedoch technisch nicht verwenden. Schauen Sie sich also die oben aufgeführten Links an. :)

Das Problem beim Festlegen der Breite auf 100%, wenn Sie Floats verwenden, besteht darin, dass sie als 100% des Containers angesehen wird. Sie funktioniert daher auch nicht, da 100% die Breite des linken Divs enthält.

Edit: Here ist das Beispiel für die andere Antwort. Ich habe sie so bearbeitet, dass html/css aus Gründen der Einfachheit oben auf der Beispielseite enthalten ist.

Ich werde es auch unten hinzufügen:

HTML

<div id="contentwrapper">
    <div id="contentcolumn">
        <div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
    </div>
</div>
<div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>

CSS

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

Ich habe in den Antworten hier keine wirklich gute Lösung gesehen. Also werde ich meine teilen. 

Dies erreichen Sie am besten mit der table-cell-Option in CSS. Eine wichtige Sache, die hinzugefügt werden muss, ist eine 'min-width' zu dem Element mit Pixelbreite.

Beispiel:

<div id="left">
    Left
</div>
<div id="right">
    right
</div>

CSS:

#left {
    display: table-cell;
    min-width: 160px;
}
#right {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}
64
w00

Dies kann mit der Flex-Box erreicht werden, die mit CSS3 eingeführt wurde und gemäß Can I use browserübergreifend ist.

.container { 
  display: flex; 
}

.left {
  width: 100px; /* or leave it undefined */
}

.right { 
  flex-grow: 1;
}

/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}
<div class="container">

  <div class="left">100px</div>
  <div class="right">Rest</div>
  
</div>

3
arcs

Obwohl ich dies nur mit CSS machen wollte, habe ich nur Tabellen verwendet ...

2
thedeepfield

Verwenden Sie Floating:

#container{
width:100%
}

#inner_left{
float:left;
max-width:200px;
}

#inner_right{
float:left;
width:100%; 
}

Edit: lesen Sie dies, es ist eine nette kleine Anleitung: quirksmode

0
Damien Pirsy

Dies basiert auf der Antwort von @ w00. +1 Freund.

Meine Situation war, als ich neben einem Label ein paar Icons zeigen wollte. Ich benutze die Flüssigkeitsklasse für das, wo die Nowrap hereinkommt. Deshalb erscheinen die Icons in derselben Zeile.

.sidebyside-left-fixed, .sidebyside-right-fixed
{
    display: table-cell;
    width: 100%;
}

.sidebyside-left-fluid , .sidebyside-right-fluid
{
    display: table-cell;
    vertical-align: top;
    white-space: nowrap;
}
0
Valamas

Hier ist eine einfache Methode, dies zu erreichen, und dies wird häufig benötigt. Es wurde auch getestet, um mit allen Browsern zu funktionieren, einschließlich der sehr alten (lassen Sie mich wissen, ob es bei keinem der Browser funktioniert).

Link zu einem Muster: https://jsfiddle.net/collinsethans/jdgduw6a/

Hier ist der HTML-Teil:

<div class="wrapper">
    <div class="left">
        Left Box
    </div>

    <div class="right">
        Right Box
    </div>

</div>

Und das entsprechende SCSS:

.wrapper {
    position: relative;
}

$left_width: 200px;
.left {
    position: absolute;
    left: 0px;
    width: $left_width;
}
.right {
    margin-left: $left_width;
}

Wenn Sie keine CSS-Präprozessoren verwenden, ersetzen Sie $ linker Breite durch Ihren Wert (hier 200px).

Gutschrift: Diese basiert auf http://htmldog.com/examples/pagelayout2/ . Es gibt einige andere nützliche.

0
Ethan

sie müssen Position angeben: absolute Stileigenschaft für beide Divs

0
tristan625