2

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

我的代码：

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 还是很陌生，不明白我的问题。提前致谢！

4

5 回答 5

3

内容比父级小 10 像素，因此旁边没有 192 像素的侧边栏空间（960 像素的 20%）。

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

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

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

#content {
    overflow: hidden;
    background: #fdd;
}
<div id="container">
    <div id="sidebar">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget.</p>
    </div>
    <div id="content">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
    </div>
</div>

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

于 2013-03-16T19:04:09.883 回答
0

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

于 2013-03-16T18:59:26.333 回答
0

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

于 2013-03-16T19:02:03.660 回答
0

这与您的元素对于容器来说太宽的事实有关。要么将你的侧边栏放在 .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>
于 2013-03-16T19:03:21.587 回答
0

问题是您的元素浮动在可调整大小的窗口中，因此当空间不足时，浮动元素会转到下一行。

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

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

<div style="width: 1300px;">
    (Put the floated boxes here)
<div>
于 2013-03-16T19:05:24.430 回答