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

【问题标题】：How to create a specific layout in html?如何在 html 中创建特定的布局？
【发布时间】：2013-02-19 18:36:24
【问题描述】：

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

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

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

而我的目标是拥有这样的东西：

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

【问题讨论】：

我尝试创建 3 个 div，这给了我第二个图像结果。然后我尝试用一个简单的标签代替第三个 div，结果还是一样。
我的意思是您可以使用嵌套的 div 进行任何类型的布局。但是当 div 的高度发生变化时，您似乎想更改布局。是这样吗？

标签： css layout html

【解决方案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 代码的截图：

【讨论】：

完美，这就是我想要的。
我遇到了一个问题，请你帮帮我。在 JSFiddle 中设置时：#sidebar { float: left; width: 100px; height: 50px; background: #485F40; } 然后蓝色 div 出现在橙色 div 的左侧，它应该在橙色 div 的底部。
@Milos 哎呀！我的错，我在css中有错字！我不小心将#right_bottom 拼写为#right_botom。这是固定的 jsFiddle：jsfiddle.net/ddxYB/4
再次感谢，但这并不是我想要的。如果侧边栏小于“右上角” div，我希望“bottom_right” div 也占用“侧边栏”空间。
@Milos 听起来可能仍然不是您所说的，但希望它更接近？除了没有将两个右侧 div 放在它们自己的包含 div 中之外，这都是一样的：jsfiddle.net/ddxYB/5

【解决方案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;
}

【讨论】：

这无法获得图 1 中描述的内容。屏幕左侧将始终为空白。
这里不是为了最终结果，而是为了说明divs容器（列）的使用。重要的一步。
好吧，对不起。你知道如何实现我的目标吗？

【解决方案3】：

将每个 div 的 CSS 位置设置为绝对位置并使用边距定位它们。

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

【讨论】：