Question

我无法将＃center3直接放在＃center1下方。我试过浮动权利它没有用，我也试过使用相对定位，但它也没有工作。

我一直在互联网上搜索这个主题的帮助，现在没有任何运气。我也花了一些时间来看看我是否可以通过自己解决这个问题，但事实证明这对我来说太难了。

HTML

<section>    
   <article></article>    
   <aside></aside>    
   <aside id="center1"></aside>    
   <aside id="center2"></aside>    
   <aside id="center3"></aside>    
</section>

CSS

section {
    margin:0px auto;
    width:960px;
}

article {
    width:960px;t turned out to be 
    height:100px;
    border:1px solid #333;
}

aside {
    width:250px;
    height:1000px;
    border:1px solid #333;
    margin-top:5px;
    margin-right:5px;
    float:left;
}

#center1 {
    width:200px;
    height:300px;
    border:1px solid #333;
    margin-top:5px;
    float:left;
}

#center2 {
    width:200px;
    height:300px;
    border:1px solid #333;
    margin-top:5px;
    float:left;
}

#center3 {
    width:200px;
    height:300px;
    border:1px solid #333;
    margin-top:5px;
    float:left;
}

Answer 1

http://jsfiddle.net/paZB6/1/ （用新小提琴编辑：我在.right-column中添加了一个1px的蓝色边框，这样你就可以很容易地看到它在做什么了）

首先需要向clear添加#center3以绕过其上方的浮动广告。

除此之外，为了防止它被清除，你需要将右侧元素包裹在一个包含的元素中，以便将这些盒子从旁边分开。

我所做的是创建两个列，你的一边，加上它右边的剩余部分，然后你的＃center1,2,3盒子包含在旁边右边的方框内。请注意，您可以根据需要向右列添加宽度和其他任何内容，我只提供了基本功能。

请注意，我还更改了包装所有内容的HTML <section>。我没有将它作为css部分（不是你正在做的最佳实践）定位，而是给了它一个名为wrapper的类，并通过类名将样式应用到它。

<强> HTML：

<section class="wrapper">


<article>
    <p>Some text</p>
</article>

<aside>
</aside>
<section class="right-container">
<aside id="center1">
</aside>

<aside id="center2">
</aside>

<aside id="center3">
</aside>
</section><!-- END RIGHT CONTAINER -->

</section>

<强> CSS：

.wrapper {
    margin:0px auto;
    width:960px;
}

article {
    width:960px;t turned out to be 
    height:100px;
    border:1px solid #333;
}

aside {
    width:250px;
    height:1000px;
    border:1px solid #333;
    margin-top:5px;
    margin-right:5px;
    float:left;
}

.right-container {
    float: left;
}

#center1 {
    width:200px;
    height:300px;
    border:1px solid #333;
    margin-top:5px;
    float:left;
}

#center2 {
    width:200px;
    height:300px;
    border:1px solid #333;
    margin-top:5px;
    float:left;
}

#center3 {
    width:200px;
    height:300px;
    border:1px solid #333;
    margin-top:5px;
    float:left;
    clear: both;
}

Answer 2

尝试将clear:left;添加到#center3

如何使用css将center1直接定位在center3下方

2 个答案: