html - 容器内有两个 float 的 div

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>

我还尝试将侧边栏中的“float:left”更改为“float:right”，我还添加了:“display:table;”在容器中。但它也没有用。侧边栏始终位于内容区域下方，它不会显示在内容 div 的右侧。

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

Answer 1

制作 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