容器内有两个浮动 div

Question

我尝试并排定义两个 div。左边是div内容，右边是div侧边栏。这两个div在容器div里面。我尝试了几种不同的方法，但其中 none 行得通。这是我的 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>

我也试过把侧边栏里的"float:left"改成"float:right"，我还在容器里加了："display:table;"。但它也没有用。侧边栏总是在内容区域的下方，它不会显示在内容的右侧div。

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

Answer 1

您遇到的问题是总宽度大于容器的宽度。看看这个：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 2

问题与 div 填充有关。缩小内容的宽度 div: width:680px; 就可以正常显示了：

http://jsfiddle.net/k8ggmctq/

Answer 3

制作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 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。查看下面的 fiddle link 它会起作用，

#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

two floating div inside a container

html

css

containers