我的代码：

Question

我有一个网页，它在容器内有两个div- content和sidebar1。我不知道为什么，但每当我将sidebar1 div放在右边，在content div之后，我就会在我的侧边栏下面，而不是在它旁边！

我的代码：

HTML

<div class="container">

  <div class="content">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <h1><!-- TemplateBeginEditable name="Heading" -->Heading<!-- TemplateEndEditable --></h1>
    <!-- TemplateBeginEditable name="Content" -->Just some
    <!-- end .content -->
    dummy text.<!-- TemplateEndEditable --></div>
    <div class="sidebar1">
    </div>
  <div class="footer">
    Footer text<!--end .footer --></div>
<!-- end .container --></div>

CSS

.sidebar1 {
    float: right;
    width: 20%;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 950px;
    float: left;
    border-left-color: #FFF;
    border-right-color: #FFF;
}
.container {
    width: 960px;
    background-color: #000000;
    margin: 0 auto; 
}

我还是HTML的新手，并不理解我的问题。提前谢谢！

Answer 1

内容比父母小10px，因此旁边没有192px侧边栏的空间（960px的20％）。

你可以做更多这样的事情：

<div id="container">
    <div id="sidebar">Sidebar</div>
    <div id="content">Main content</div>
</div>

#container {
    width: 980px;
    margin: 0 auto;
}

#sidebar {
    float: right;
    width: 200px;
}

#content {
    overflow: hidden;
}

上面的代码会将侧边栏浮动到容器的右侧，然后内容div将占用容器中的任何剩余空间。 overflow: hidden告诉div在决定大小时注意浮动元素而不是仅占用容器的整个宽度。为此，你必须在overflow: hidden元素之前拥有浮动元素。

jsFiddle

Answer 2

尝试对float: left使用.sidebar1，或重新排序HTML，以便侧边栏位于内容之前。

Answer 3

你的容器里面实际上有三个<div>，我不知道那是不是故意的。你应该给你的.content width: 80%;。

Answer 4

这与容器的元素太宽这个事实有关。将侧边栏放在.content中，或调整宽度。这是一个选项：

http://jsfiddle.net/cKMa2/2

.sidebar1 {
    float: right;
    width: 20%;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 78%;
    float: left;
    border-left-color: #FFF;
    border-right-color: #FFF;
}
.container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.footer {
    clear: both;
}

<div class="container">
    <div class="sidebar1">Some content Some content Some content</div>
    <div class="content">
         <h1>Heading</h1>

        <p>Just some dummy text.</p>
    </div>
    <div class="footer">Footer text</div>
</div>

Answer 5

问题是你的元素浮动在一个可调整大小的窗口中，所以当没有足够的空间时，浮动的元素会转到下一行。

有一个简单的解决方案：将浮动元素放入容器中，其宽度足以容纳所有浮动盒子。

我不确定您的屏幕尺寸，但例如，这可能有效：

<div style="width: 1300px;">
    (Put the floated boxes here)
<div>

无法将我的侧边栏放在内容的右侧？

我的代码：

HTML

CSS

5 个答案:

jsFiddle