初学者CSS定位（浮动）

Question

初学者CSS定位（浮动）

csshtmlcss-float

3

我对CSS定位不熟悉，正在尝试解决布局中关于div定位的问题。

我想创建这个: (http://www.subcide.com/images/dynamic/css-layout/floatexample3.gif)

然而，当我严格按照指示操作时，出现了问题。

以下是我的代码和工作示例 (http://rendera.heroku.com/usercode/a8dd085e8500914d5c8c3a89880cb3d513b54cdb)

请注意，深绿色的div与正常绿色的div没有对齐。它会留下右侧的空白，而我并不需要。我在CSS中使用float标签将深绿色向右浮动，但无济于事。

很抱歉我提出了这样一个幼稚的问题。我想这是发帖的最佳地点，也不知道在哪里可以寻求帮助。希望未来能够再提出更多的问题。

- Adrian Clark

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alfie · Answer 1

0

更改：

#Content{
    background:green;
    margin-right:280px;
}

to:

#Content{
    float: left;
    background:green;
    width:480px;
}

- Alfie

这对我有用，非常感谢。但是，当我使用padding-right而不是为#content创建一个宽度时，会发生什么导致布局不起作用？ - Adrian Clark

当您设置padding或margin时，您正在为元素内部或周围添加（或删除）空间。增加padding将在元素内部创建空间，而margin则会改变元素外部的空间。当您指定margin-right:280px;时，您是在说“在此元素的右侧添加280像素的不可见宽度”。因此，页面“认为”该元素比实际宽度大280像素，从而迫使侧边栏向下推移。 - Alfie

- greydnls · Answer 2

从你正在学习的教程中，布局应该是：

<div id="page-container">
    <div id="main-nav">Main Nav</div>       
    <div id="header">Header</div>
    <div id="sidebar-a">Sidebar A</div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
</div>

在你的代码中，你有：头部、内容、侧边栏和页脚。

将内容和侧边栏出现的顺序调换一下，它就可以工作了。