css - 侧边栏不会向右浮动 wordpress

Question

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

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

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

谢谢！

score 2 · Accepted Answer

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

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

的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;
}

css - 侧边栏不会向右浮动 wordpress

1 回答 1

Related

Reference