如何在html中创建特定的布局？

Question

我想在html中创建一个特定的布局，但有一些困难。

图像比文字更容易理解，所以这就是我所拥有的：

这很好，但是只要div1变得更高，我就会有这个：

我的目标是拥有类似的东西：

目前，我正在使用div，这可能不是一个好主意。欢迎任何帮助。 非常感谢你提前。

Answer 1

Divs是一个很好的方式。您可以使用浮动布局，并在两个右侧div周围包含div。这里有一些代码向您展示我的意思：

<强> HTML

<div id="wrapper" class="clearfix">
    <div id="sidebar"></div>
    <div id="main_content">
        <div id="top_right"></div>
        <div id="bottom_right"></div>
    </div>
</div>

<强> CSS

#wrapper { background: #44BBF0; }
#sidebar { float: left; width: 100px; height: 500px; background: #485F40; }
#main_content { float: right; }
#top_right { width: 200px; height: 200px; background: #FF553F; }
#botom_right { width: 200px; height: 300px; background: #B0DE91; }

.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1; /* IE < 8 */
}

这是一个JS小提琴链接，向您展示它的外观：http://jsfiddle.net/ddxYB/

确保清除包装div。因为它只包含浮动元素，否则它将没有高度。在我使用的示例中，我设置了高度以节省时间，但如果您使用自动高度并让div占用内容的高度，那也就是这样。

这是来自JSFiddle代码的截图：

Answer 2

首先，您必须了解容器的概念。

创建2个容器作为列：

• 包含div1

的左栏

• 包含div2和div3

的右栏

因此，HTML会像这样创建一个结构：

<div class="col1">
    <div>div 1</div>
</div>

<div class="col2">
    <div>div 2</div>
    <div>div 3</div>
</div>

使用CSS定位列：

div.col1 {
    float: left;
    width: 200px;
}

div.col2 {
    float: left;
    width: 400px;
}

Answer 3

将每个div的CSS位置设置为绝对值，并使用margin设置它们。

#divName {
position: absolute;
margin: 10px 10px 10px 10px; //position them wherever you want.
}