對齊div的佈局

Question

我試圖按照我附加的圖片對齊我的div。

請原諒壞的塗鴉。

我已經嘗試了幾種方法來獲得所需的佈局，但是當我閉上我的div時就會漏掉。

這裏的My Fiddle

所有的幫助是非常讚賞:)

   <div id="bigbox"> 
       <div id="box1"> 
        <div id="innerbox1"> 

        <div id="box-image"> 
         <a href="course.html"> 
          <p id="image-text"> 
           Image text</p></a> 
        </div> 


       <div id="box2"> 
        <div id="innerbox2"> 


        <div id="box3"> 
        <div id="innerbox3"> 



         <div id="box-image2"> 
          <a href="blog.html"> 
          <p id="image-text2"> 
           Image text</p></a> 

         </div> 
        <div id="box4"> 
         <div id="innerbox4"> 
         <div id="bluebox"> 
        </div></div> 
      </div> 
      </div> 

Answer 1

我不知道爲什麼我這樣做，但是，這裏是它的快速刺。您可以根據需要調整高度和寬度。

http://codepen.io/scottstreit/pen/epzjBp

<div class="wrapper"> 
    <div class="col col1"> 
    <div class="box1"> 
     <img src="http://placehold.it/300x400" alt="Box 1" /> 
    </div> 
    <div class="box3"> 
     <img src="http://placehold.it/300x100" alt="" /> 
    </div> 
    </div> 

    <div class="col col2"> 
    <div class="box2"> 
     <img src="http://placehold.it/300x600" alt="" /> 
    </div> 
    <div class="box4"> 
     <p>Dreamcatcher Wes Anderson photo booth ugh, drinking vinegar Brooklyn ethical occupy. Single-origin coffee butcher next level ethical tofu mumblecore, Brooklyn umami High Life hella hoodie taxidermy four dollar toast. Farm-to-table cray fanny pack 
     chillwave. Wayfarers ennui four loko next level yr banjo retro brunch, irony lumbersexual Kickstarter keffiyeh leggings semiotics.</p> 
    </div> 
    </div> 
</div> 

CSS

* { 
    box-sizing: border-box; 
    text-align: center; 
} 
.wrapper { 
    width: 1024px; 
    min-height: 1000px; 
    border: 1px solid lime; 
} 
div.col { 
    width: 50%; 
    float: left; 
    display: inline-block; 
}