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

Question

我无法将#center3 定位在#center1 的正下方。我试过向右浮动但没有用，我也试过使用相对定位但也没有用。

我一直在 Internet 上搜索有关此主题的帮助，但一直没有成功。我也花了一些时间看看我是否可以自己解决这个问题，但事实证明这对我来说太难了。

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/(用新的 fiddle 编辑:我在 .right-column 中添加了一个 1px 的蓝色边框，这样你就可以很容易地看到它在做什么)

您需要添加一个 clear至 #center3首先是为了绕过它上面的 float 。

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

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

请注意，我还更改了您的 HTML <section>那包裹着一切。我没有将它作为 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;
}