Html 调校；截面问题

为什么我的旁白标签在页面底部，它们不会出现在分区旁边？为什么？我想要3列挨着一列

*{
边际：0px；
填充：0px；
字体系列：“源Sans-Pro”，无衬线；
}
#标题{
宽度：100%；
高度：200px；
背景颜色：浅灰色；
}
#收割台h1{
字体大小：67px；
文本对齐：居中；
填充顶部：50px；
}
#主体{
宽度：90%；
高度：自动；；
左边距：自动；
右边距：自动；
}
#部分{
宽度：60%；
高度：自动；
左边距：自动；
右边距：自动；
边框：3倍纯黑；
}
#对不对{
宽度：10%；
高度：自动；
浮动：左；
边框：3倍纯黑；
}
#在你左边{
宽度：10%；
高度：自动；
浮动：对；
边框：3倍纯黑；
}

清洁模板
清洁模板







&抄袭；版权所有

浮动只影响浮动元素后面的内容。因此，在您的情况下，由于旁白在末尾浮动，因此它们不会影响

部分

。相反，您必须对它们进行重新排序，以便首先对浮动元素进行排序：

<div id="main_body">
    <aside id="aside_left"></aside>
    <aside id="aside_right"></aside>

    <!-- section after the floating elements -->
    <section id="section"></section>
</div>

---

顺便说一句，下次你发布这样一个问题时，你应该删掉所有让你很难理解你的结构的内容。您不必将实际内容放入框中，只需给它们固定大小（可能还有一些背景色，以便我们知道哪个框是什么）。

请发布外部JSFIDLE链接，以便我们可以轻松修改它。@wazaaap但是。。。有一个“复制要回答的代码段”按钮。@Basic：为什么你希望它们不在底部而在任何地方？这就是你把它们放在HTML中的地方。@Joseph但是…我说的是外部JSFIDLE链接。@Wazaaap通常我们不鼓励用户在有内部源的情况下使用外部源。这降低了将来由于链接断开或内容过期而导致问题相关性降低的可能性。我看不出原始海报有什么理由把他的代码片段从网站上删除。如果这是你喜欢的工具，你也可以很容易地复制和粘贴它自己。