CSS für Container Divs und in der nächsten Zeile fallen

Question

Ich bin eher ein Programmierer als Designer, und ich versuche, <div>s zu umarmen, anstatt mit Hilfe von Tabellen, sondern steckte zu werden.

Hier ist, was ich versuche zu tun. Ich gründe eine Umfrage der Seite. Ich möchte, dass jeder Text der Frage an der Spitze des blauen div sitzen, und wickeln, wenn es zu lang ist. Ich möchte alle roten divs in der oberen rechten Ecke des Behälters div aufreihen.

Layout-http://img528.imageshack.us/img528/4330/divsforsurveyop2. jpg

Hier ist, was ich habe angefangen mit, es funktioniert so lange fein wie der Rahmen breit mehr als 420 Pixel ist. Dann springt der rote div in der nächsten Zeile. Ich glaube, ich mag es falsch angegangen, vielleicht sollte ich die Dinge nach rechts schweben?

.greencontainer{
    width:100%;
    spacing : 10 10 10 10 ;
    float: left; 
}

.redcontainer{ 
    float: left; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: center; 
}

.bluecontainer{ 
    clear: both;
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: left; 
}

Answer 1

Hier ist, was ich tun würde:

<div class="greencontainer">
  <div class="redcontainer">
    <input type="checkbox" />
  </div>
  <div class="bluecontainer">
    <label>Text about this checkbox...</label>
  </div>
</div>

mit CSS:

.greencontainer{
   float:left;
   clear:left;
   width:100%;
 }
 .redcontainer{
   float:right;
   width:20px;
 }
 .bluecontainer{
   margin-right:20px;
 }

PS Padding-Werte sollten immer Einheiten haben, es sei denn, sie Null sind.

Answer 2

Sie schwimmen nichts anderes als die roten Container, und schweben Sie ihn nach rechts. Stellen Sie sicher, dass der HTML-Code für die roten Container vor dem HTML-Code für die blauen Container platziert wird. Halten Sie die statische Breite auf den blauen Behälter, und halten Sie Ihre Hand:. Sowohl auf dem grünen Container

Answer 3

nicht klar verwenden: sowohl auf Ihrem bluecontainer, weil es jedes Element auf beiden Seiten klar wird (links und rechts). und Sie sollten den redcontainer Schwimmer nach rechts machen.

Answer 4

Sie haben "clear: both" auf dem blauen div. Das ist, was ich denke, das Problem verursacht.

Lesen Sie http://www.barelyfitz.com/screencast/ html-Training / css / Positionierung / , die einige praktische Demonstrationen hatte.

Answer 5

Sehr wenig Testen hier, aber ich denken Sie wollen "clear: both;" auf .greencontainer statt "float: left". Auch "clear: both" entfernen .bluecontainer

Weitere Informationen finden Sie unter: http://www.quirksmode.org/css/clearing. html

Answer 6

Ich glaube nicht, dass Sie auf den grünen Container überhaupt schwimmen müssen, wie es das enthält div ist. Plus, eine „clear: both“. Aussage nur benötigt würde, wenn mehrere blau / rot divs in den gleichen grünen Containern setzen

Versuchen

.greencontainer{
    width:100%;
spacing : 10 10 10 10 ;

}

.bluecontainer{ 
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
font-family: sans-serif; 
    text-align: left; 
}
.redcontainer{ 
    float: right; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
font-family: sans-serif; 
    text-align: center; 
}

Sie müssen unter Umständen auch einen rechten Rand auf die blauen Container oder links Marge auf den roten Container hinzuzufügen eher zwischen ihnen konsistenten Abstand zu bekommen, als Polsterung verwendet, die innerhalb des div nicht um es auf den Abstand bezieht