Css 边栏不会向右浮动wordpress_Css_Wordpress_Floating

Css 边栏不会向右浮动wordpress

css wordpress

Css 边栏不会向右浮动wordpress,css,wordpress,floating,Css,Wordpress,Floating,我使用了emptycanvas作为wordpress的起点。我已经将.wrapper设置为80%宽度，最大宽度为1250px 容纳内容/边栏的容器设置为宽度100%，而内容未设置宽度，并设置为浮动：左；没有其他选项时，侧边栏设置为350px；带浮动：对……出于某种原因，它拒绝浮动，并且总是低于内容！如果我在内容上设置了一个宽度，例如500px，那么所有内容都会就位……我想如果没有指定的宽度，它会自动调整以适应周围浮动的项目……那么我在这里做错了什么不幸的是，这是在本地服务器上，因此我无法显示确

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

容纳内容/边栏的容器设置为宽度100%，而内容未设置宽度，并设置为浮动：左；没有其他选项时，侧边栏设置为350px；带浮动：对……出于某种原因，它拒绝浮动，并且总是低于内容！如果我在内容上设置了一个宽度，例如500px，那么所有内容都会就位……我想如果没有指定的宽度，它会自动调整以适应周围浮动的项目……那么我在这里做错了什么

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

谢谢

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

您需要指定内容div的宽度。否则，div的宽度将由其内部内容的宽度决定。这无法为您提供可管理的布局

两个浮动div不能包含在容器div中（您可以通过为容器、内容和边栏div提供不同的背景来检查这一点，如下所述）。这是因为，非浮动分区不能仅包含浮动内容，其默认显示设置（div的默认显示属性为block）。要解决此问题，需要将容器的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><!--End of content-->
                <div id="sidebar">
                      <h1> I am inside the side bar </h1>
                </div><!--End of sidebar-->
        </div><!--End of container-->

    </div><!--End of wrapper-->

</body>

容器同时容纳中心和右侧的钢筋？是什么支撑着包装纸？包装纸是身体前面的最外层。很明显，中心和侧边栏不适合在最大宽度内。任何一个都必须收缩，通常是中心栏或您所称的内容。如果你想要一个流畅的主题，你只需要使用百分比。你需要为#内容指定宽度。

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