Question

嘿伙计们，我怎样才能实现这种简单的布局？我希望答案能帮助我理解CSS布局和浮动的基础知识。

    <div id="verticalElement1">
        <div id="horizontalElement1">
            some content
        </div>
        <div id="horizontalElement2">
            some content
        </div>
    <div>
    <div id="verticalElement2">
        <div id="verticalElement3">
            some content
        </div>
        <div id="verticalElement4">
            some content
        </div>
    <div>

好的，所以，正如“id”所暗示的那样，我希望垂直元素能够在彼此的顶部上坐下来。

在顶部元素中，我希望2个水平元素彼此。

我希望在没有对任何元素应用“内联”的情况下实现。

另外，我不想使用绝对定位，除非它相对于某个元素，并且很好地缩放。

我希望用非常干净和可扩展的CSS实现所有这些，这样我就可以添加和删除元素，而无需更改样式值。一切都应该通过将适当的类应用于某些元素来完成，如下所示：

<div id="verticalElement1" class="containsHorizontalElements"> <div id="horizontalElement1" class="isHorizontal"> some content </div> <div id="horizontalElement2" class="isHorizontal"> some content </div> <div> <div id="verticalElement2"> <div id="verticalElement3"> some content </div> <div id="verticalElement4"> some content </div> <div>

我尝试过使用花车，但一切都变得疯狂......帮助！

欢呼声

Answer 1

您的垂直容器应该只显示为块，默认情况下为div个标记。它们的内部内容可以是左侧浮动，也可以是左侧和右侧浮动。您可能还想在水平元素上设置宽度，以确保它们实际上都在同一条线上。

你的HTML可能如下所示：

<div id="container1" class="container">
    <div class="inner-element"></div>
    <div class="inner-element"></div>
</div>
<div id="container2" class="container">
    <div class="inner-element"></div>
    <div class="inner-element"></div>
</div>

css可能如下所示：

.inner-element {
    float: left;
    width: 100px;
}

另外，您必须记住清除所有包含浮动的容器：

.container {min-height: 10px;}

.container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

当然，您可能希望将您的div命名为更符合语义的内容，例如“内容”或“包装器”或类似于实际描述其目的的内容，而不是它们应该如何在页面上查看，即命名某事“内容”而不是“左栏”

Answer 2

要实现水平元素，你需要浮动：左;他们，他们将互相堆叠。

垂直元素可以简单地通过声明显示：块或宽度：100％来位于彼此的顶部。这将确保它们占据整个水平空间，使它们堆叠在彼此之上。

简单的CSS布局 - 如何实现这种布局，并使其容易扩展？

2 个答案: