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;
}

应该是关于你需要什么（或者差不多！）。

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

Answer 2

我创建了两个 js fiddles 供您查看。两者都使用％而不是固定数字，第一个在右侧的水平容器之间具有均匀的间距（尽管它们与左侧不共享相同的底部），而第二个使底部容器位于右侧有一个绝对位置，在水平容器之间产生不均匀的空间： 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

这与您正在寻找的内容接近吗？