Question

我尝试并排定义两个div。左边是div内容，右边是div侧边栏。这两个div位于容器div中。我尝试了几种不同的方式，但没有一种方法可行。这是我的css代码：

#container {
   width:1000px;
   position: relative;
}



#content {
    width:700px;
    background-color: white;
    border-top: 3px solid midnightblue;
    padding: 80px 10px 0px 10px;
    float:left;
}

#sidebar{
    border-top: 3px solid midnightblue;
    background-color:#E0E0E0;
    padding: 20px;
    width: 250px;
    float:left;
}

html的代码如下：

 <div id="container">

<div id="content">
    <p> This is my blog website. </p>
</div>

<div id="sidebar">
   <p>This is the sidebar. </p>
</div> 

</div>

我也试过改变＆＃34; float：left＆＃34; to＆＃34; float：right＆＃34;在侧边栏中，我还添加了：＆＃34; display：table;＆＃34;在容器中。但它也没有用。侧边栏始终位于内容区域之下，它不显示在内容div的右侧。

在最外面，有一个包装类。如果我删除了包装类和容器，那么它将起作用。但我需要包装类。有什么建议？谢谢！

Answer 1

该问题与div填充有关。减少内容div的宽度：width:680px;，它将正确显示，如下所示：

http://jsfiddle.net/k8ggmctq/

Answer 2

制作box-sizing: border-box。 Know more about box-sizing

只需在CSS中添加以下代码即可。

* { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

<强> JSFIDDLE DEMO

Answer 3

您遇到的问题是总宽度大于容器的宽度。看看这个：http://jsfiddle.net/kez5c71m/ 我已将#sidebar的填充从20更改为10

#container {
   width:1000px;
   position: relative;
}



    #content {
        width:700px;
        background-color: white;
        border-top: 3px solid midnightblue;
        padding: 80px 10px 0px 10px;
        float:left;
    }

    #sidebar{
        border-top: 3px solid midnightblue;
        background-color:#E0E0E0;
        padding: 10px;
        width: 250px;
        float:left;
    }

Answer 4

根据你的CSS

 #container width = 1000px

 #content width   =  720px (700px + 10px + 10px left and right padding ) 

 #sidebar width   =  290px (250px + 20px + 20px left and right padding )

    Total width   =  1010px (since the total width exceeds your #container width, the #sidebar was not able to position itself properly as per css applied)

checkout the working code here (jsfiddle)

Answer 5

设置容器div的宽度和高度，并分别调整内容和侧边栏div宽度。查看下面的小提琴链接，它将起作用，

#container {
   width:450px;
    height:400px;
   position: relative;
   border: 3px solid midnightblue;
}



#content {
    width:200px;
    background-color: white;
    border: 3px solid midnightblue;
    padding: 80px 10px 0px 10px;
    float:left;
}

#sidebar{
    border: 3px solid midnightblue;
    background-color:#E0E0E0;
    padding: 20px;
    width: 100px;
    float:left;
}

http://jsfiddle.net/w5dmzoqj/

容器内的两个浮动div

5 个答案: