如何将两个 div 堆叠在一起？

Question

我已经到处查找并按照所有人的指示进行操作，但仍然无法使其工作;__;

#aside
{
    float:left;
    width:200px;
    background-color:#39A861;
}

#section
{
    width:800px;
    float:left;
}

首先，它们是一个section和aside标签，但我将它们更改为div以简化过程，但仍然不行，结果相同。第二个div不紧贴在第一个旁边，就像是断开了一行。这真的让我抓狂。我的容器是这两个div的地方：

#container1
{
    margin:0 auto;
    width:1000px;
}

这里是HTML代码

<div id="container1">  
    <div id="aside">
        <h2>stuff</h2>
    </div>
    <div id="section">
        <h1>stuff</h1>
    </div>
</div>

- KingHarambe

---

请发布您的HTML代码。 - potashin

只需删除aside和section的宽度，使它们相邻。然后在aside内添加一个新的div并设置宽度。 - РАВИ

请确保在 #aside-div 和 #section-div 上没有设置任何边距和/或填充（在 Firebug 或类似工具中检查）。例如，如果 #adisde 上有 10px 的右填充，则这两个 div 的宽度将为 1010px，因此 #section-div 将“下移”到 #aside-div 下面（因为它超出了 #container1-width）。 - bestprogrammerintheworld

Answer 1

有很多这样的方法。

<div class="container">
  <div class="aside"><h1>Title</h1></div>
  <div class="section">Stuff</div>
</div>

选项1

.container {
  width:1000px;
}

.aside{
  width:200px;
  float:left;
}

.section {
  margin-left:200px;
}

option 2

.container {
  width:1000px;
}

.container:before, .container:after{
  display:table;
  content:"";
}

.container:after{
  clear:both;
}

.aside{
  width:200px;
  float:left;
}

.section {
  float:left;
  width:800px;
}

- Jeyarathnem Jeyachanthuru

Answer 2

我猜你可能在容器中设置了一些 border、padding、margin 或其他占用空间的属性。

在下面的例子中，虽然容器宽度为 200px，内部的 div 分别设置了 50px 和 150px，但它们不会在同一行上显示，因为边框从每个侧面各占用了 1px 的空间：

(click "Run code snippet" to see the results)

#container     { width: 200px; height: 45px; border: 1px solid #f00; }
#container div { border: 1px solid #000; }
#first         { float: left; width: 50px; }
#second        { float: left; width: 150px; }

<div id="container">
    <div id="first"> First div </div>
    <div id="second"> Second div </div> 
</div>

在这个例子中，你有两个选择：1）移除边框，或者2）考虑边框大小减小内部div的大小。

#container     { width: 200px; height: 45px; border: 1px solid #f00; }
#container div { border: 1px solid #000; }
#first         { float: left; width: 48px; }
#second        { float: left; width: 148px; }

<div id="container">
    <div id="first"> First div </div>
    <div id="second"> Second div </div> 
</div>

---

我建议你在Chrome开发者工具中玩弄这些CSS属性，直到你看到它们都在同一行。

- Yuri Ghensev