0

这是我的jsFiddle

在我的 Fiddle 链接中，我浮动了我的左侧边栏和右侧边栏。据我所知，浮动元素已从 html 正常流程中删除。我只是不明白为什么它正在取代我的右侧边栏。

<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area">hi</div>
<div class="right-sidebar"></div>

我的CSS：

.content-area {
   background-color: #bbb;
   height: 310px;
}
.left-sidebar {
   float: left;
   width: 50px;
   height: 100%;
   background-color: #abcdef;
}
.right-sidebar {
   float: right;
   width: 50px;
   height: 100%;
   background-color: #abcdef;
}
4

3 回答 3

2

http://www.vanseodesign.com/css/understanding-css-floats/

元素按正常流的顺序放置，从正常流中删除，然后根据浮动向右或向左移动。您的右侧栏向下移动，因为它位于正常流程中的主要内容之后。如果您不希望它被移动，则需要更改元素的顺序。

http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme

根据规范：

在浮动模型中，首先按照正常流程布局一个盒子，然后从流程中取出并尽可能向左或向右移动。内容可能会沿着浮动的一侧流动。

于 2013-08-09T15:55:05.093 回答
1

你对position: absolute. 浮动会将元素向左或向右移动，鼓励其他元素在它周围“浮动”，但它们仍会在流中，并且其他元素会受到它的影响。

使用 时position: absolute，您从流中移除元素，将其放置在其他元素的顶部或下方。

这是您更新的小提琴。最重要的变化在这部分：

.content-area {
    background-color: #bbb;
    height: 310px;
    position: relative;
}
.left-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}
.right-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}

父级也有一个位置，因此侧边栏可以是其中的位置。左侧和右侧边栏分别位于父级的顶部和最左侧和最右侧。

如果您仔细观察，您会看到主要内容块的内容现在位于侧栏后面。我把文本加长了一点，所以你可以看到它出现在左栏的下方。

当然，这可能不是您想要的，但是您可以通过更改标记中的顺序很容易地解决它。首先按您喜欢的顺序添加侧边栏，然后添加主要内容。结果可以在这里看到。

它的工作方式：在内容区域的顶部，首先启动左侧栏。它向左浮动，鼓励下一个元素浮动在它旁边，具有相同的顶部位置。该元素将是右侧栏，它向右浮动，并且还鼓励下一个元素向左浮动。主要区域没有明确的宽度，因此它认为它可以紧贴在两者之间，仍然从相同的顶部位置开始。

由于主元素本身不浮动，因此下一个元素将从主区域结束的位置开始（顶部）。因此，如果右侧栏出现在主要区域之后，它会向下移动，就像在您的示例中一样。如果主要区域内容增加，右侧栏将进一步向下移动。

于 2013-08-09T15:55:15.877 回答
0 
<div class="content-area">
<div class="left-sidebar"></div>
<div class="right-sidebar"></div>
<div class="main-area">hi</div>

您需要将主区域更改为在其他两个浮动元素之后。这样做可能看起来很奇怪，但这意味着主区域不会向下推右侧边栏，因为内容在标记中紧随其后。我希望这有帮助。

于 2013-08-09T15:59:49.980 回答