Wie bekomme ich 'Four Corner' Alignment mit floated divs

Question

Ok, so dass mein Projekt erfordert, dass meine divs floated werden, weil ich gerne Text ordentlich daneben legen würde. Ich kann meine divs je nach Bedarf nach links und rechts schweben lassen, aber wie Sie aus dem Snippet sehen (obwohl es nicht das ist, was Sie von einem Browser bekommen, da die Dimensionen aus sind), müssen die zwei Divs am unteren Rand sein nahe der Spitze, um mit den beiden links schwebenden divs ein perfektes scquare zu machen. Unten ist das, was ich suche:

.clear { 
 
    clear: both; 
 
} 
 
#centerbar { 
 
    width: 100%; 
 
    height: calc(100vh - 150px); 
 
    background-color: black; 
 
    float: left; 
 
} 
 
#centerbar h1 { 
 
    text-align: center; 
 
    color: white; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-family: courier; 
 
    font-size: 19px; 
 
    color: white; 
 
} 
 
#container { 
 
    min-height: 100%; 
 
    margin-bottom: -150px; 
 
    width: 100%; 
 
} 
 
#container:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
#content { 
 
    display: flex; 
 
    margin: 0 auto; 
 
    width: 800px; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 
.box { 
 
    height: 200px; 
 
} 
 
.fltlt { 
 
    float: left; 
 
    margin-right: 50px; 
 
} 
 
.fltrt { 
 
    float: right; 
 
    margin-right: 50px; 
 
}

<div class="container"> 
 
    <div id="nav"> 
 
    <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Works</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div id="centerbar"> 
 
    <h1>Sample Layout</h1> 
 
    <div class="box"> 
 
     <img src="gold.jpg" alt="The Color Gold" class="fltlt"> 
 
     <p>This is some sample text</p> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="box"> 
 
     <img src="grey.jpg" alt="The Color Grey" class="fltlt"> 
 
     <p>This is some sample text</p> 
 
    </div> 
 
    <div class="box"> 
 
     <img src="orange.jpg" alt="The Color Orange" class="fltrt"> 
 
     <p>This is some sample text</p> 
 
    </div> 
 
    <div class="box"> 
 
     <img src="red.png" alt="The Color Red" class="fltrt"> 
 
     <p>This is some sample text</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
    <div class="wrap"> 
 
    <div class="sub">Lorem Ipsum</div> 
 
    <div class="sub">Lorem Ipsum</div> 
 
    <div class="sub">Lorem Ipsum</div> 
 
    </div> 
 
</div>

Answer 1

Ich empfehle, nichtzu verwendenfür Layout, und seit Sie mit flex begonnen haben, verwenden Sie es vollständig.

Bonus: Eine saubere, einfache und lesbare Struktur von CSS und Markup.

.container .row { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.row .box { 
 
    width: 50%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin-bottom: 10px; 
 
} 
 
.box img { 
 
    width: 100px; 
 
    margin-right: 10px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="box"> 
 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt=""> 
 
     <p>Some paragraph here</p> 
 
    </div> 
 
    <div class="box"> 
 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt=""> 
 
     <p>Some paragraph here</p> 
 
    </div> 
 
    <div class="box"> 
 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt=""> 
 
     <p>Some paragraph here</p> 
 
    </div> 
 
    <div class="box"> 
 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt=""> 
 
     <p>Some paragraph here</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Hier ist, was Sie suchen (ich es von Anfang an gemacht):

.box { 
 
    float: left; 
 
    position: relative; 
 
    width: 50%; 
 
    margin-bottom: 10px; 
 
} 
 
.container .flex { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.container p { 
 
    margin-left: 5px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="box"> 
 
    <div class="flex"> 
 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100"> 
 
     <p>Some paragraph here</p> 
 
     </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="flex"> 
 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100"> 
 
     <p>Some paragraph here</p> 
 
     </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="flex"> 
 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100"> 
 
     <p>Some paragraph here</p> 
 
     </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="flex"> 
 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100"> 
 
     <p>Some paragraph here</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>