侧边栏不会向右浮动 wordpress答案

【问题标题】：Sidebar wont float right wordpress侧边栏不会向右浮动 wordpress
【发布时间】：2012-11-25 15:11:58
【问题描述】：

我使用 emptycanvas 作为 wordpress 的起点。我已将 .wrapper 设置为 80% 宽度，最大宽度为：1250px；

存放内容/侧边栏的Container设置为宽度100%，内容没有设置宽度，设置为float:left；没有其他选项，侧边栏设置为 350px； with float:right....由于某种原因它拒绝浮动并且总是低于内容！如果我在内容上设置例如 500px 的宽度，一切都会到位......我认为如果没有指定宽度，它会自动调整到浮动在它周围的项目......那么我在这里做错了什么？

不幸的是，这是在本地服务器上，所以我无法显示确切的代码，但这里没有任何额外内容我没有告诉你..

谢谢！

【问题讨论】：

容器可以同时容纳中心和右侧的条吗？包装是什么？
包裹体在正文之前的最外层。
很明显，中心和侧边栏不适合最大宽度。任何一个都必须缩小，通常是您所说的中心栏或内容。如果你想要一个 fluid 主题，你只需要使用百分比。

标签： css wordpress floating

【解决方案1】：

您需要纠正两个问题才能使您的布局按预期工作（请参阅下面我刚刚根据您的描述创建的代码）

你需要指定内容div的宽度。否则，div 的宽度将由其中内容的宽度决定。这无法为您提供可管理的布局。
两个浮动的 DIV 不能包含在容器 div 中（您可以通过为容器、内容和侧边栏 div 提供不同的背景来检查这一点，如下所示）这是因为，非浮动分区不能只包含浮动内容，使用其默认显示设置（div 的默认显示属性是块）。要解决这个问题，需要将容器的显示属性改为table。将内容和侧边栏包含在容器内的另一种方法是再添加一个非浮动 div 并将其从浮动对象中清除（clear:both）。

HTML
```
<body>

    <div id="wrapper">
        <div id="container">
                <div id="content">
                     <h1> I am inside content. what will happen if I increase the content in here? </h1>
                </div>
                <div id="sidebar">
                      <h1> I am inside the side bar </h1>
                </div>
        </div>

    </div>

</body>
```

CSS

#wrapper{
margin:0 auto;
width:80%;
max-width:1250px;
}
#container{
width:100%;
background:red;
display:table; /*This is necessary to wrap the two floated contents inside. The other way of achieving same result is to add some non-floated div and set to clear floated contents*/
}
#content{
float: left;
background:green;
}
#sidebar{
width:350px;
float: right;
background:blue;
}

【讨论】：

你需要为#content指定宽度。