Question

我到处寻找并遵循每个人的指示并且它不起作用; __;

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

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

首先他们是一个部分和旁边的标签，但我把它们改为div以简化过程，但NOPE相同的结果。第二个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>

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

选项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;
}

Answer 2

我的猜测是，您可能会收到一些border和/或padding，margin或任何占用容器空间的内容。

在以下示例中，虽然容器宽度为200px且内部div已获得50px和150px，但由于边框占用{{}}，因此它们不会停留在同一行中{1}}来自各方：

（点击＆＃34;运行代码段＆＃34;查看结果）

＆＃13;

1px

＆＃13;

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

＆＃13;

在此示例中，您有两个选项：1）删除边框，或2）减少内部div的边框大小的帐户＆＃39;尺寸：

＆＃13;

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

＆＃13;

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

＆＃13;

我建议您在<div id="container"> <div id="first"> First div </div> <div id="second"> Second div </div> </div> F12处使用这些css属性，直到您看到它们位于同一行。

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

2 个答案:

选项1

选项2