0

我正在尝试将两个div并排对齐。两个div's 都包含在 another 中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;

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

4

5 回答 5

1

多功能花车

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

例如：

<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/

于 2013-05-15T12:44:08.820 回答
1

摆脱margin-left: 200px;

jsFiddle 示例

这将蓝色 div 向右推，并导致红色 div 下降，因为没有足够的空间让两者相邻存在。

于 2013-05-15T12:12:59.803 回答
1

从 css 中删除 margin-left：

#main {
    width: 800px;
    height: 400px;
    background-color: blue;
}
于 2013-05-15T12:13:24.250 回答
1

嘿 Narendera，你的parent div's宽度是1000px，你已经给margin-left了你的 子 div #main，所以这就是它下降的原因，所以你应该margin-left:200px从 子 div中删除 #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;
}

并通过它工作正常.....见演示

于 2013-05-15T12:13:53.320 回答
0

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

#sidebar {
width: 200px;
#float: left;
height: 400px;
background-color: red;
}
于 2013-05-15T12:20:25.240 回答