css）我想将Footer放在该部分下，但放在文章旁边

Question

<body>
   <header></header>
   <section>
       <nav>
       <aside>
       <article>
   </section>
   <footer></footer>
</body>

这是我的HTML代码的大纲。
整个代码在这里： http : //jsfiddle.net/o3omng/466Gv/

/* semantics */
body { width : 1000px ; /* body 가로폭 1000px */
       margin : 0 auto ; /* body 가운데 정렬  */
       font-family : 'Nanum Gothic', sans-serif ; /* 폰트 나눔고딕 */ }
header, section, nav, footer { display : block ; /*블럭 요소 지정 */ }
aside, article { display : inline-block ; /*인라인-블럭 요소 지정 */ }

这是我的CSS代码的一部分。
由于此CSS代码的缘故，语义标记必须像这样放置：

标头
导航
放在一边
页脚

但是，如果我运行我的代码，则页脚标记会放在旁边的文章旁边。
像这样：

标头
导航
放在一边
文章的页脚扩展

您可以在Jsfiddle中看到它。
我想在整个部分下放置页脚。
我该如何解决？

Answer 1

您已将aloat应用于aside和article，它们已经是内联块了。
因为包裹它们的部分并没有清除内容。

如果您将花车拿走并用它调整物品，则可以：

http://jsfiddle.net/466Gv/7/ （请参阅“ css”标签的末尾）

/*  STACK OVERFLOW CHANGES */
.f_left, .f_right{
    float:none; /* because we already have inline-block*/
}
aside, article{
    vertical-align: top; /* to have them aligned nicely*/   
}
article{
    width: 800px; /* fit size, so it doesnt break into the next line */
}
nav{
    margin-bottom: 2em;  /* some breathing room for then nagivation */
}

希望这对您有所帮助。

ps：您不需要在小提琴中包含html和head标签。 仅身体上的标记就足够了

css）我想将Footer放在该部分下，但放在文章旁边

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-07-31 09:41:15

css）我想将Footer放在该部分下，但放在文章旁边

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-07-31 09:41:15

解决方案1
0 已采纳 2014-07-31 09:41:15