如何在简单的HTML页面中对齐div

Question

我有这个简单的HTML模板，我添加了高度而不是内容。

我所追求的是对齐＆＃34;交付＆＃34;和＆＃34;联系我们＆＃34; div下面＆＃34;关于我们＆＃34; div和＆＃34;退货政策＆＃34;在它右边。

＆＃13;

＆＃13;

@import url(https://fonts.googleapis.com/css?family=News+Cycle);
 body {
  font-family: 'News Cycle', sans-serif;
  color: #666;
  line-height: 1.3;
}
strong,
b {
  font-weight: 900;
}
h3 {
  font-weight: bold;
  border-bottom: 1px solid #e2e2e2;
}
p,
ul li {
  font-size: 14px;
  font-weight: lighter;
}
#logo,
#product {
  float: left;
  width: 100%;
}
#title,
#logo {
  padding: 0 1% 0 1%;
  margin: 1%;
}
#product_description,
#about_us,
#delivery,
#returns_policy,
#contact_us {
  float: left;
  width: 45%;
  padding: 0 1% 0 1%;
  margin: 1%;
  border-radius: 5px;
  border: 1px #e2e2e2 solid;
  background-color: #f5fafa;
}
#product_image {
  text-align: center;
}

＆＃13;

<div id="logo">
</div>
<div id="product">
  <div id="title">
    <h1>XYZ</h1>
  </div>
  <div id="product_image">
  </div>
  <div id="product_description">
    <h3>Product Description</h3>
  </div>
</div>
<div id="about_us" style="height:600px;">
  <h3>About Us</h3>
  <div class="content">
  </div>
</div>
<div id="delivery" style="height:200px;">
  <h3>Delivery</h3>
  <div class="content">
  </div>
</div>
<div id="returns_policy" style="height:800px;">
  <h3>Returns Policy</h3>
  <div class="content">
  </div>
</div>
<div id="contact_us" style="height:100px;">
  <h3>Contact Us</h3>
  <div class="content">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

HTML：

<div id="logo">
</div>
<div id="product">
  <div id="title">
    <h1>XYZ</h1>
  </div>
  <div id="product_image">
  </div>
  <div id="product_description">
    <h3>Product Description</h3>
  </div>
</div>
<div class="leftCol">
  <div id="about_us" style="height:600px;">
    <h3>About Us</h3>
    <div class="content">
    </div>
  </div>
  <div id="delivery" style="height:200px;">
    <h3>Delivery</h3>
    <div class="content">
    </div>
  </div>
</div>
<div class="rightCol">
  <div id="returns_policy" style="height:800px;">
    <h3>Returns Policy</h3>
    <div class="content">
    </div>
  </div>
  <div id="contact_us" style="height:100px;">
    <h3>Contact Us</h3>
    <div class="content">
    </div>
  </div>
</div>

添加到css

.leftCol { width: 50%; float: left; }
.rightCol { width: 50%; float: right; }