0

我无法将#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;
}
4

2 回答 2

1

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

您需要首先添加一个clearto#center3以绕过它上面的浮动。

但是，除此之外，为了防止它也清除您的旁边，您需要将右侧元素包装在包含元素中，以便将这些框与旁边分开。

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

请注意，我还更改<section>了包装所有内容的 HTML。我没有将它作为部分在 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;
}
于 2013-03-13T13:00:49.297 回答
0

尝试添加clear:left;到#center3

于 2013-03-13T12:43:37.833 回答