eine CSS-Baugruppe anlegen, Floating divs links, rechts und unten

Question

Ich versuche, ein „Muster“ von divs zu erstellen, die wie folgt aussieht:

jedoch zur Zeit es wie folgt aussieht:

was zu meiner Seite etwas wie folgt aussehen:

in diesem letzten Schnipsel wird alles auch nach rechts gedrückt. Im Idealfall muss die Baugruppe zentriert sein. Die Get Conditions-Schaltfläche sollte sich auch unterhalb der Print Runs-Textbox befinden, da sie sich beide in demselben Div befinden und unter den beiden oberen Divs zentriert sind. Die Dropdown-Listen und Radiobutton-Liste sind beide, wo sie sein sollten.

Ich spielte mit Floating der unteren div, aber die verschiedenen Dinge, die ich versuchte, führte meist dazu, dass die untere div mehr Platz zwischen den beiden oberen divs einnimmt.

Ich habe die HTML und CSS in eine JSFiddle eingefügt, bitte beachten Sie, dass es ASP-Tools nicht erkennt, so gibt keine genaue Vorschau dessen, was ich erreichen möchte.

https://jsfiddle.net/h4tr31gt/1/

Answer 1

Dies bezieht sich nicht direkt auf Ihre Frage zu Schwimmern, aber Sie können dasselbe Ergebnis erzielen, indem Sie flexbox verwenden. https://jsfiddle.net/gnw634gv/

.container { 
 
    background-color: lightblue; 
 
    height: 400px; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.block-top { 
 
    width: 50%; 
 
    background-color: yellow; 
 
    height: 50%; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="block-top">A</div> 
 
    <div class="block-top">B</div> 
 
    <div class="block-bottom">C</div> 
 
</div>

Answer 2

eine Klasse von clearfix die Mutter div hinzufügen, etwa so:

<div class="clearfix"> </div> 

dann die folgende Art Ihres CSS hinzufügen:

.clearfix { 
    clear: both; 
} 

Sie dann diese wiederverwenden können wo auch immer Sie Floats verwenden.

https://jsfiddle.net/c3rLqce7/

Answer 3

Wie DaniP hat Schwimmer vorgeschlagen Clearing würde Ihr Problem lösen. Mit der Float-Eigenschaft wird Ihr Element aus dem tatsächlichen Seitenfluss entfernt und entsprechend Ihrem Float-Wert entweder rechts/links ausgerichtet. Wenn Sie also versuchen, ein anderes Element nach den floated-Elementen hinzuzufügen, wird die Seite so besetzt, als ob die floated-Elemente nicht vorhanden wären. Deshalb sehen Sie, dass es sich nach oben bewegt. Das Floaten des nächsten Elements, ohne die vorherigen Elemente zu entfernen, hat das gleiche Ergebnis wie ohne Float. Daher müssen Sie das Float mit clear: both/right/left löschen, damit die Umgebung der floatenden Elemente gelöscht wird und Sie Elemente ausrichten können. Sie können mehr auf Floats/Clearfixes überprüfen, da einige neue Dinge immer wieder auftauchen. Sie könnten es klarer finden.