Verschachtelte floating divs Ursache äußere div nicht wachsen
Wenn jemand vorschlagen kann, eine bessere Platzierung als stackoverflow für css-Fragen bitte lassen Sie mich wissen.
Ich habe ein äußeres div mit hintergrund und Rahmen, und dann muss ich zwei Spalten haben, in das farbige Feld. Irgendeinem Grund, wenn ich die floating divs innerhalb des äußeren div, das äußere div wächst nicht mit.
Hier ist mein HTML:
<div class="tip_box">
<h3>Send</h3>
<hr />
<form id="email_form">
<div class="three-columns">
<div class="contact_form_input">
<h6>Your Name</h6>
<input type="text" name="name_text_box" class="form_input" id="name_text_box" />
</div>
<div class="contact_form_input">
<h6>Your Email</h6>
<input type="text" name="email_text_box" class="form_input" id="email_text_box" />
</div>
</div>
<div class="three-columns">
<div class="contact_form_input">
<h6>Recipient Name</h6>
<input type="text" name="name_text_box" class="form_input" id="Text1" />
</div>
<div class="contact_form_input">
<h6>Recipient Email</h6>
<input type="text" name="email_text_box" class="form_input" id="Text2" />
</div>
</div>
</form>
</div>
<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>
Hier ist mein CSS:
.three-columns {
width: 290px;
float: left;
margin-right: 45px;
}
.tip_box {
padding: 20px;
margin: 20px 0px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 10px;
border-radius: 7px;
padding-left: 55px;
background: #eee;
font-style:italic;
background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px;
border: 1px solid #b7db58;
color: #5d791b;
}
Screenshot:
http://dl.dropbox.com/u/2127038/cssissue.png
- Ich Liebe, wie Sie ein Bild zu zeigen deutlich das problem, das Sie hatten. Wirklich schnell und einfach zu sehen, die problem die du beschreibst, ist genau die gleiche, die ich war auf der Suche zu lösen. +1
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nicht-float-Blöcke mit float-Blöcke werden nicht automatisch zu erweitern, da float-blocks genommen werden, die außerhalb des normalen Ablaufs (oder zumindest speziell außerhalb der Strömung). Eine Art und Weise zu korrigieren, dass ist die Angabe der
overflow
Eigenschafthidden
oderauto
.Sehen quirksmode für mehr.
overflow:hidden
hat das Potenzial, abhacken Inhalte wie Bilder, dieoverflow
die box.auto
. 😉Fügen Sie folgenden HTML-Code nach
<div class="tip_box"></div>
:Hier ist der CSS:
Wird es sicherlich funktionieren.
dieser legt neuen block formatting context in ie7+ und anderen Browsern, Trigger haslayout im ie6 enthalten schwebt
Sind Sie gehen zu müssen, was gemeinhin bekannt als " clearfix. In diesem Fall ist eine
overflow: hidden
auf das enthaltende element tun wird - siehe: http://www.jsfiddle.net/yijiang/zuNwH/2Nebenbei, vielleicht wollen Sie auch zu verwenden
label
Elemente statth6
markup-Etiketten für Formular-Elemente, und verwenden Sie eine Liste, anstatt nur einzelnediv
s, mit jedemlabel - input
- pair-Mädchen, und reduzieren die Menge derclass
Attribut, das Sie verwenden, indem Sie sich auf komplexere Selektoren für die CSS-Datei.In diesem Fall würde ich nicht schweben die divs Links, ich würde Sie display: inline oder inline-block.
Deine 3 Spalten werden wiederum in 2 Spalten, 1 Spalte, wenn das browser-Fenster verkleinert.
inline-block
nützlich wäre, aber es nicht unterstützt wird von IE6 oder IE7, es sei denn, Sie tun etwas schmerzhaft Kreisverkehr hacks, die geschehen ist in diesem Fall völlig unnötig. Undinline
würde keinen Effekt haben, irgendwo in der Nähe was zu sein scheint, soll, könnte, auch nicht über die divs überhaupt.