html - 在奇怪的布局中对齐 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;
}