如何以这种方式对齐三个div？

Question

三个div有两列。一个浮在左边，宽度为60％，包含1个div（图像）。另一个浮在右边，宽度为40％，包含两个div。这两个div是垂直对齐的，它们的高度等于图像的高度。

如果我没有明白我的问题，我很抱歉。如果我可以在这里上传图片会更好。先感谢您！我试图实现这个近2个小时，但仍然失败了。我真的想知道如何做到这一点。

以下是我在HTML中的代码：

<div id = "content" class = "group">
    <img src="image/Home_HeroImg_Vision.jpg" id="bigpic">
    <div id = "col">
      <div id = "p1">
        <h2 class="para">upcoming events</h2>
        <img src="image/RightArrow.png" class = "arrow">
        <img src="image/BirdSmall.jpg" id = "bird">
        <p id="para1">Paul Shellmont:</p>
        <p id="para2">Bird Watching</p>
        <p id="para3">April 5, 2012 - June 30, 2012</p>
        <a href="www.facebook.com">learn more</a>
      <div>
      <div id="p2">
        <h2 class="para">upcoming events</h2>
        <img src="image/RightArrow.png" class = "arrow">
        <p id="para1">Paul Shellmont:</p>
        <p id="para2">Bird Watching</p>
        <p id="para3">April 5, 2012 - June 30, 2012</p>
        <a href="www.facebook.com">learn more</a>
      </div>
    </div>
  </div>
</div>

这是我的CSS代码：

#content {
  background: #E4E4E4;
  margin: 15px 0 15px 0;
}

#content img,
#content div {
  padding: 10px;
}

#bigpic {
  float: left;
    width: 60%;
}

#col{
  float:right;
  width:40%;
}

#p1, #p2 {
  height: 50%
}

Answer 1

您的基本布局正确无误。您的问题在于您设置宽度，还要添加填充。请记住，width是内容的宽度。添加填充时，会增加元素的总宽度。

例如，您的#bigpic设置为60％宽度，但其容器也有10px的填充。这使得元素两侧的总宽度增加了60％加上20px。

检查这种方法的方法是删除#bigpic的填充。