如何将2个div放在较大的div中？

Question

我试图重新创建： 但是，我在定位所有内容时遇到了麻烦。最好的方法是什么？

当前HTML：

<div id="container">
  <div class="wrap">
    <div id="interview">
          <h1>INTERVIEW: JOHN HUNT</h1>
        </div>
      <div id="article">
        <h2>ARTICLE: WOMEN IN SURFING</h2>
      </div>
</div>

当前的CSS：

#container{
width:918px;
height:429px;
background-color:#cdcccc;
clear:both;}

.wrap{
width: 620px;
margin-left:10px;
margin-top:10px;}

#interview{
width:652px;
height:179px;
background-color:#FFF;}

#article{
width:652px;
height:179px;
background-color:#FFF;}

Answer 1

默认情况下，div元素位于彼此之上，因此如果您希望订阅部分位于右侧，则必须将其浮动。

将您的左侧div包装在父容器div中。这是基本的想法。

Answer 2

#interview和#article大于.wrap，这不是您想要的！

另外，添加到您的CSS：

#interview{
    position: relative;
    margin-bottom: 10px;
}

#article{
    position: relative;
}

这会对你有帮助！

Answer 3

对于这种类型的布局，请尝试使用GRID SYSTEM布局。 访问960GS网站获取帮助。