Kann nicht legen Sie die pixel-Breite des div mit css Breite Standardtitel

Ich versuche zum einrichten einer div-enthält 4 divs. Ich möchte zum festlegen der Breite des Containers und einige der darin enthaltenen divs um Werte, aber Sie scheinen einfach, nehmen Sie die Breite des Inhalts.

<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 linken divs nicht den erforderlichen breiten?

  • Sind diese gemeint Spaltenüberschriften? Wie es scheint, eine Tabelle besser geeignet sein könnten.
  • Nicht die Spaltenüberschriften. Nicht verwenden möchten Sie eine Tabelle wie die styles ändern kann deutlich...
InformationsquelleAutor paul | 2010-11-02
  1. 12

    ich denke, es ist, weil display:inline-style
    versuchen Sie dies:

    <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>
    • +1 Das scheint getan haben, der trick! Erklärung anyone 😉
    • Inline-Elemente verwenden Sie keine Breite oder Höhe, die Sie angeben.
    InformationsquelleAutor heximal
  2. 22

    Der Grund Sie können nicht die Breite ist, weil Sie display:inline;.

    Wenn Elemente angezeigt werden, inline, können Sie auch nicht Ihre Dimensionen angegeben, da die Größe des Elements wird bestimmt durch die Länge des Textes innerhalb es.

    Standardmäßig <div> - tags gesetzt werden, um display:block;. In diesem Modus können Sie dessen Höhe und Breite angegeben, aber standardmäßig unten angezeigt, den vorhergehenden block.

    Gibt es zwei Möglichkeiten, um dieses für Sie:

    • Verwenden display:block; und float:left; -- Das wird sich ändern, die Blockaden in bewegliche Elemente, was bedeutet, dass nachfolgende Elemente wrap-around Sie. Wenn verwendet, mit anderen Blöcken, diese effektiv können Sie in der Leitung. Allerdings mit float werden, können andere unerwartete Nebenwirkungen, wegen der wrap-around-Effekt, den ich beschrieben.

    • Verwenden display:inline-block; -- Dies ist meine bevorzugte Lösung für diese Frage. inline-block ist eine half-way house-Modus zwischen block und inline. Es ermöglicht ein element behandelt werden als inline-für die Zwecke des Dokumenten-flow, aber immer noch Verhalten sich wie ein block nach innen, dass es immer rectanguar, und Sie können angeben, Breite und Höhe, usw. Es hat ein paar Macken (vor allem schlechter support im IE6), aber im Allgemeinen für das, was Sie zu erreichen versuchen, ist es eine viel sauberere Lösung und hat nicht die sonderbare Nebenwirkungen von float.

    Hoffe, das hilft.

    InformationsquelleAutor Spudley
  3. 5

    Ändern Sie Ihre CSS wie folgt

    .container div {
    display: inline-block;
    }

    Wenn Sie die div-container inline -, Sie aktiv setzen, alle seine Kinder zu inline, wie auch, könnte man sich ja auch gerade mit <span>s.

    Hier ist ein Beispiel für Sie zu finden.

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

    InformationsquelleAutor Kyle
  4. 1
    .container {
  float: left;
  width: 300px;
  position: relative;
}

.container div {
  float: left;
}

    Sollte den trick tun. Entfernen Sie die inline-anzeigen auf der inneren divs und float alle divs Links. Dann können Sie die breiten der divs und alle Ränder zwischen Ihnen.

    InformationsquelleAutor Hooray Im Helping
Schreibe einen Kommentar