Question

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

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

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

谢谢！

Answer 1

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

您需要指定内容div的宽度。否则，div的宽度将由其内部的宽度确定。这无法为您提供易于管理的布局。
两个浮动的DIV不能包含在容器div中（您可以通过给出容器，内容和侧边栏div的不同背景来检查这一点，如下所示）这是因为，非浮动除法不能仅包含浮动内容，具有默认显示设置（div的默认显示属性为块）。要解决此问题，您需要将容器的display属性更改为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;
}

边栏不会浮动wordpress

1 个答案: