DIV inline-block + Breite 100%

Kann ich nicht anzeigen, ein paar DIV ' s in einer Zeile. display: inline-block und float: left funktioniert nicht. Meine Website-Breite ist nicht fixed so möchte ich es dynamisch und passt sich so jeder Breite des Bildschirms.

HTML:

<div id="all">
    <div id="a">25px</div>
    <div id="b">200px</div>
    <div id="c">
        <div id="c1">100%</div>
        <div id="c2">100%</div>
        <div id="c3">100%</div>
    </div>
    500px
</div>

CSS:

DIV {
    margin:5px;
    font-size:10px;
}

DIV#all {
    width:500px;
    border:1px dotted black;
}

DIV#a {
    display:inline-block;
    width:25px;
    height:200px;
    border:1px solid red;
    color:red;
}

DIV#b {
    display:inline-block;
    width:150px;    
    height:200px;
    border:1px solid green;
    color:green;
}

DIV#c {
    display:inline-block;
    width:auto;
    height:200px;
    border:1px solid blue;
    color:blue;
}

DIV#c1 {
    width:auto;
    border:1px dotted blue;
    color:blue;   
}

DIV#c2 {
    width:auto;
    border:1px dotted blue;    
}

DIV#c3 {
    width:auto;
    border:1px dotted blue;   
    color:blue;
}

Live-Demos:

PROBLEM: http://jsfiddle.net/BC2d9/
GELÖST: http://jsfiddle.net/RAds3/ (display:table)

Sie möchten float:left nicht display:inline-block
Es gibt einige inkonsistente Verhalten in Ihrer Lösung. Wenn man genauer hinsieht, dem mittleren div-B1 sollte 200 Pixel breit, aber es ist nicht. Es hat die Breite nur 150 px. Irgendeine Idee, warum?

InformationsquelleAutor clavish | 2012-08-02

css css-tables

11

Sich das problem mit dem aktuellen Versuch der width: 100%; auf die Dritte Spalte div#c. 100% hier wird 100% von Ihrer Muttergesellschaft - enthält alle drei Spalten. Je nachdem, welches Maß der Flexibilität, die Sie wollen, haben Sie ein paar Optionen.

Wenn die Website-Breite ist fest, eine Feste Breite für die Dritte Spalte.

Wenn Sie möchten, dass die Dritte Spalte zu dehnen, um seinen Inhalt, set max-width.

Wenn Sie möchten, dass die Dritte Spalte zu dehnen, zu füllen, seine Eltern, sind Sie wahrscheinlich besser dran mit (css) Tabellen.

Check-out http://somacss.com/cols.html für eine große Ressource, über css-Spalten-layout.

Danke! und display:table-ist die beste Lösung für mich.
nicht unterstützt in IE 6
Demo mit display:table - jsfiddle.net/RAds3

InformationsquelleAutor xec

Problem ist mit der Dritten Spalte. Sie können nicht von der Breite zu 100%. Außerdem müssen Sie float: left;. Hier ist der Feste code:

<div id="all">
    <div id="a">25px</div>
    <div id="b">200px</div>
    <div id="c">
        <div id="c1">100%</div>
        <div id="c2">100%</div>
        <div id="c3">100%</div>
    </div>
    <div style="clear:both;"></div>
    500px
</div>

und CSS:

DIV {
    margin:5px;
    font-size:10px;
}

DIV#all {
    width:500px;
    border:1px dotted black;
}

DIV#a {
    float: left;
    width:25px;
    height:200px;
    border:1px solid red;
    color:red;
}

DIV#b {
    float: left;
    width:200px;    
    height:200px;
    border:1px solid green;
    color:green;
}

DIV#c {
    float: left;
    width:210px; 
    min-height:190px;
    border:1px solid blue;
    color:blue;
    padding: 5px;
}

DIV#c1 {
    width:100%;
    border:1px dotted blue;
    color:blue;
    margin: 0 0 5px 0;   
}

DIV#c2 {
    width:100%;
    border:1px dotted blue;
    margin: 0 0 5px 0;   
}

DIV#c3 {
    width:100%;
    border:1px dotted blue;   
    color:blue;
    margin: 0 0 5px 0;
}

Und auch LIVE DEMO

InformationsquelleAutor Miljan Puzović

Wenn Ihre Website in der Breite fest ist, dann ersetzen Sie einfach 100% mit allen blieb der Breite in den container.
Beispiel: jsFiddle

Wenn Sie wollen, dass es dynamisch und passt sich so jeder Breite des Bildschirms, ich denke, es ist nicht möglich, mit reinem CSS. Ich habe es mit jQuery:

var containerWidth = $('#all').outerWidth();
var widthLeft = $('#a').outerWidth(true) + $('#b').outerWidth(true);
var widthRight = containerWidth - widthLeft - 20; //20px = spacing between elements

$('#c').css('width', widthRight+ 'px');
$('#c1, #c2, #c3').css('width', widthRight-10+ 'px'); //10 = padding on the right side

Geändert CSS:

DIV#c {
    display:inline-block;
    height:200px;
    border:1px solid blue;
    color:blue;
    float: right;
}

DIV#c1 {
    border:1px dotted blue;
    color:blue;   
}

DIV#c2 {
    border:1px dotted blue;    
}

DIV#c3 {
    border:1px dotted blue;   
    color:blue;
}

Entfernt width: 100% - und set - float:right zu #c.

Live-demo: jsFiddle

Tolle Idee! Danke!
Dies ist die Schnellste Lösungen für jQuery-Benutzer. Wenn Sie möchten, diese zu lösen in reinem css versuchen @xec Lösung.

InformationsquelleAutor Nikola K.

Check-out dieses update. Ich hoffe das ist gut genug 🙂

DIV {
margin:5px;
font-size:10px;
}

DIV#all {
    width:500px;
    border:1px dotted black;
}

DIV#a {
    display:inline-block;
    width:25px;
    height:200px;
    border:1px solid red;
    color:red;
    float:left;
}

DIV#b {
    display:inline-block;
    width:150px;    
    height:200px;
    border:1px solid green;
    color:green;
    float:left;
}

DIV#c {
    display:inline-block;
    width:277px; 
    height:200px;
    border:1px solid blue;
    padding:0 7px 0 5px;
    color:blue;
    float:left;
}

DIV#c1 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;
    color:blue; 
}

DIV#c2 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;    
}

DIV#c3 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;   
    color:blue;
}

Etwas code wäre nett.
"dieses update" ist ein link zu jsfiddle wo sehen Sie die änderungen
Ich weiß, aber es ist wichtig, auch code und zeigen Sie Ihre änderungen. Auch jsFiddle-links gebrochen werden kann, nach einiger Zeit.
Du hast Recht, habe ich bereits Hinzugefügt css-Teil, das geändert wurde

InformationsquelleAutor Matei Mihai

-4
```
div { float:left; width:10px; height:10px; }
```
Hilft?

Ich bezweifle es, um ehrlich zu sein.

InformationsquelleAutor williamtell

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.