Question

我试图将两个div并排排列。 div的所有内容都包含在另一个div中。

这是我编写的HTML和CSS代码，而且可怕的错误。

HTML：

<div id="content">     
 <div id="main"></div>
 <div id="sidebar"></div>     
</div>

CSS：

 #content {
    width: 1000px;        
}
#sidebar {
    width: 200px;
    float: left;
    height: 400px;
    background-color: red;
}
#main {
    width: 800px;
    margin-left: 200px;
    height: 400px;
    float: left;
    background-color: blue;
}

以下是jsFiddle

编辑：最终为我工作的代码如下：

<div id="content">

 <div id="sidebar"></div>
 <div id="main"></div>

</div>

和css如下：

#content {
    width: 1000px;
    overflow: auto;
}
#sidebar {
    width: 200px;
    height: 400px;
    float: left;
}
#main {
    width: 800px;
    height: 400px;
    margin-left: 200px;
}

我不知道原因，但......

overflow : auto;

需要以正确的方式显示它。

Answer 1

摆脱margin-left: 200px;

<强> jsFiddle example

那是将蓝色div推向右边并导致红色div下降，因为两者之间没有足够的空间存在。

Answer 2

从css中删除margin-left：

#main {
    width: 800px;
    height: 400px;
    background-color: blue;
}

Answer 3

嘿Narendera您的parent div's宽度 1000px ，并且您已将margin-left提供给子div #main，这就是为什么它的原因下来所以你应该从子div margin-left:200px

中删除#main

<强> CSS

  #content {
    overflow: hidden;
    width: 1000px;
}

#main {
    background-color: blue;
    float: left;
    height: 400px;
    width: 800px;
}


#sidebar {
    background-color: red;
    float: left;
    height: 400px;
    width: 200px;
}

通过它的工作正常.....见DEMO

Answer 4

Versatile Floats

通过标记，您可以按照您需要的任何顺序放置浮动。

例如：

<h3>div.main comes first in mark-up order.</h3>
<div id="content" class="ex1">
    <div id="main"></div>
    <div id="sidebar"></div>
</div>

如果您应用此CSS：

.ex1 #sidebar {
    width: 200px;
    float: left;
    height: 100px;
    background-color: red;
}
.ex1 #main {
    width: 800px;
    height: 100px;
    float: left;
    background-color: blue;
}

您的侧栏将显示在右侧，因为元素按照它们在标记中出现的顺序向左浮动。

在这个例子中，我切换HTML，使主要元素是第二个：

<h3>div.main comes second in mark-up order and is not floated.</h3>
<div id="content" class="ex2">
    <div id="sidebar"></div>
    <div id="main"></div>
</div>

并使用此CSS：

.ex2 #sidebar {
    width: 200px;
    float: left;
    height: 100px;
    background-color: red;
}
.ex2 #main {
    width: 800px;
    height: 100px;
    margin-left: 200px;
    background-color: blue;
}

在这种情况下，侧栏向左浮动并首先出现。主要元素没有浮动但是左边距允许侧边栏空间。

但是，您可能希望主要元素在标记中排在第一位（出于SEO原因......）：

<h3>div.main comes first in mark-up order but appears 2nd.</h3>
<div id="content" class="ex3">
    <div id="main"></div>
    <div id="sidebar"></div>
</div>

并应用此CSS：

.ex3 #sidebar {
    width: 200px;
    float: right;
    height: 100px;
    background-color: red;
}
.ex3 #main {
    width: 800px;
    float: right;
    height: 100px;
    background-color: blue;
}

在这种情况下，如果你向右浮动，主要是首先浮动到右边，侧边栏也是向右浮动但是在主要的左边缘，就像第二个例子，但是有不同的标记。

小提琴：http://jsfiddle.net/audetwebdesign/GP29e/

Answer 5

检查了您的代码。你只需从#sidebar中删除float：left。

#sidebar {
width: 200px;
#float: left;
height: 400px;
background-color: red;
}

对齐两个div出错了？？

5 个答案:

Versatile Floats