css - 如何在 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 fiddle 链接，向您展示它的外观：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 位置设置为绝对位置并使用边距定位它们。

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