Kann die Pixelbreite von div nicht mit css width einstellen. Attibute

Ich versuche ein div zu erstellen, das 4 divs enthält. Ich möchte die Breite des Containers und einige der enthaltenen divs festlegen, aber sie scheinen nur die Breite des Inhalts zu nehmen.Kann die Pixelbreite von div nicht mit css width einstellen. Attibute

<html> 
<head> 
    <style> 
div { 
    border: 1px solid #888; 
} 

.container { 
    width: 300px; 
    position: relative; 
} 

.container div { 
    display: inline; 
    } 

.div1 { 
    width: 20px; 
    overflow: hidden; 
} 
.div2 { 
    width: 80px; 
    overflow: hidden; 
} 
.div3 { 
    width: 160px; 
    overflow: hidden; 
} 
.div4 { 
    width: 20px; 
    overflow: hidden; 
    position: absolute; 
    top:0px; 
    right: 0px; 
} 
    </style> 
</head> 
<body> 

<div class="container"> 
    <div class="div1"><img src="1x1.gif" width="1" height="1"/></div> 
    <div class="div2"><span>date</span></div> 
    <div class="div3"><span>text</span></div> 
    <div class="div4"><span>twistie</span></div>  
</div>  
</body> 
</html>

Das Ergebnis sieht wie folgt aus:

+--+----+----+------------------------+---+ 
| |date|text|      |twi| 
+--+----+----+------------------------+---+

Kann mir jemand erklären, warum die linke divs sind nicht auf die erforderlichen Breiten eingestellt werden?

Quelle

2010-11-02 paul

Sind diese Spaltenüberschriften gemeint? Es scheint, als wäre eine Tabelle geeigneter. – meagar

Nicht Spaltenüberschriften. Ich möchte keine Tabelle verwenden, da sich die Stile * erheblich * ändern könnten ... – paul

Ich denke, es wegen der Anzeige ist: Inline-Stil try this:

<div style='width:100px;overflow:hidden;'> 
<div style='float:left;width:20px'></div> 
<div style='float:left;width:20px'></div> 
<div style='float:left;width:20px'></div> 
<div style='clear:both;'></div> 
</div>

Quelle

2010-11-02 13:56:11 heximal

+1 Das scheint der Trick gewesen zu sein! Erklärung jemand ;-) – paul

Inline-Elemente verwenden keine Breite oder Höhe, die Sie angeben. –

.container { 
    float: left; 
    width: 300px; 
    position: relative; 
} 

.container div { 
    float: left; 
}

den Trick tun sollten. Entferne die Inline-Anzeige in den Innen-Divs und schwebe alle Divs nach links. Dann können Sie die Breite der Divs und die Ränder dazwischen festlegen.

Quelle

2010-11-02 13:58:10

Ihre CSS ändern als

.container div { 
    display: inline-block; 
    }

folgt Wenn Sie den Container div Inline-Set, Sie alle ihre Kinder aktiv gesetzt und Inline, Sie auch nur <span> s unter Verwendung gewesen sein kann.

Hier ist ein Beispiel für Sie zu sehen.

http://jsfiddle.net/Kyle_Sevenoaks/ZwKDb/

Quelle

2010-11-02 14:00:05 Kyle

Der Grund, warum Sie nicht die Breiten einstellen können, weil Sie display:inline; setzen.

Wenn Elemente inline angezeigt werden, können ihre Dimensionen nicht angegeben werden, da die Größe des Elements durch die Länge des darin enthaltenen Texts bestimmt wird.

Standardmäßig werden <div> Tags auf display:block; gesetzt. Dieser Modus kann seine Höhe und Breite angeben, wird aber standardmäßig unterhalb des vorhergehenden Blocks angezeigt.

Es gibt zwei Möglichkeiten, um dies für Sie:

Verwenden display:block; und float:left; - Dadurch werden die Blöcke in die Floating-Elemente ändern, was bedeutet, dass nachfolgende Elemente um sie herum wickeln wird. Bei Verwendung mit anderen Blöcken ermöglicht dies effektiv, sie auszurichten. Jedoch kann die Verwendung von float andere unerwartete Nebenwirkungen haben, aufgrund des Wrap-Around-Effekts, den ich beschrieben habe.
Verwenden Sie display:inline-block; - Dies ist meine bevorzugte Lösung für diese Frage. inline-block ist ein Halbwegsmodus zwischen block und inline. Es erlaubt einem Element, für den Zweck des Dokumentenflusses als Inline behandelt zu werden, aber es verhält sich immer noch intern wie ein Block, da es immer rechteckig ist und Sie Höhe und Breite usw. angeben können. Es hat ein paar Macken (vor allem schlechte Unterstützung in IE6), aber im Allgemeinen für das, was Sie erreichen wollen, ist es eine viel sauberere Lösung und hat nicht die ein oder andere Nebeneffekte von float.

Hoffe, dass hilft.

Quelle

2010-11-02 14:23:27 Spudley

Kann die Pixelbreite von div nicht mit css width einstellen. Attibute

Antwort

Verwandte Themen