CSS，HTML布局

Question

我一直试图让我的页面在下面有以下布局，但没有运气。我想在第二栏中叠加这些框。任何人都可以指向正确的方向吗？谢谢。

Answer 1

创建2个的div，一个用于左，一个在右，然后右手DIV中（它的尺寸与左侧的div相同）具有3周的div作为单独的div。像这样的事情在你的HTML：

<div id="left> 
....some stuff.... 
</div> 
<div id="rightContainer"> 
    <div id="top"> 
    ....some stuff.... 
    </div> 
    <div id="middle"> 
    ....some stuff.... 
    </div> 
    <div id="bottom"> 
    ....some stuff.... 
    </div> 
</div> 

你的CSS将是：

#left { 
width: 200px; 
float:left; 
height:600px; 
} 
#rightContainer { 
width: 200px; 
float:left; 
height:600px; 
} 
#top, #middle, #bottom { 
height:200px; 
width:100%; 
float:left; 
} 

应该是你需要什么（或有abouts！）。

发布您的代码，到目前为止，我相信我们可以做得更多:)

Answer 2

我已经创建了两个JS小提琴给你看。两者都使用％而不是固定数字，第一个在右侧的水平容器之间有间距（尽管它们不与左侧共享同一个底部），而第二个底部容器在底部右手侧有一个绝对位置，从而在水平方向的容器之间的不均匀的空间： HTML：

<div id="left"> 

</div> 
<div id="right"> 
    <div id="row1"></div> 
    <div id="row2"></div> 
    <div id="row3"></div> 
</div> 

CSS：

#left { 
    display: inline-block; 
    border: 2px solid black; 
    height: 596px; 
    width: 30%; 
} 

#right { 
    position: relative; 
    display: inline-block; 
    height: 600px; 
    width: 60%; 
    margin-left: 8%; 
    vertical-align: top; 
} 

#row1, 
#row2, 
#row3 { 
    border: 2px solid black; 
} 

#row1, 
#row2 { 
    height: 30%; 
    margin-bottom: 5%; 
} 

#row3 { 
    height: 20%; 
} 

same spacing but different bottoms jsfiddle

HTML：

<div id="left"> 

</div> 
<div id="right"> 
    <div id="row1"></div> 
    <div id="row2"></div> 
    <div id="row3"></div> 
</div> 

CSS：

#left { 
    display: inline-block; 
    border: 2px solid black; 
    height: 596px; 
    width: 30%; 
} 

#right { 
    position: relative; 
    display: inline-block; 
    height: 600px; 
    width: 60%; 
    margin-left: 8%; 
    vertical-align: top; 
} 

#row1, 
#row2, 
#row3 { 
    border: 2px solid black; 
} 

#row1, 
#row2 { 
    height: 35%; 
    margin-bottom: 5%; 
} 

#row3 { 
    height: 20%; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
} 

same bottom but different spacing jsfiddle

那是接近你在找什么？