Html 在 HTML5 部分旁边浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15413758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Float Aside next to a Section HTML5
提问by user1957778
I am trying to get an Aside tag to float next to a Section tag with CSS but not having much luck so far.
我试图让一个 Aside 标签漂浮在带有 CSS 的 Section 标签旁边，但到目前为止运气不佳。
Below is the HTML
下面是 HTML
<div id="WholePage">
<section>
<asp:ContentPlaceHolder ID="MainContentWindow" runat="server"> </asp:ContentPlaceHolder>
</section>
<aside>
<div id="SideAdRotator">
<asp:AdRotator ID="AsideAdRotator" runat="server" AdvertisementFile="Adverts.xml" Height="300px" Width="150px"/>
</div>
</aside>
Below is the CSS so far
以下是到目前为止的 CSS
section
{
display : block;
width : 48em;
height : 40em;
border-width : 0.1em;
border-style : dashed;
border-color : black;
}
aside
{
display : block;
width : 12em;
height : 40em;
border-width : 0.1em;
border-style : dashed;
border-color : black;
}
Any suggestions or advice on how to get this would be greatly appreciated. First time Ive ever had this issue of floating sections so really stumped as to why now.
任何关于如何获得它的建议或建议将不胜感激。我第一次遇到这个浮动部分的问题，现在真的很难过。
Many thanks to all the responses, they have all been useful and solved my problem.
非常感谢所有的回复，他们都很有用并解决了我的问题。
采纳答案by Diodeus - James MacFarlane
Add float:leftto both elements.
添加float:left到两个元素。
Don't forget to clear your floatsas well.
不要忘记清除你的浮标。
回答by Ron van der Heijden
I should change the order of the tags and give them display: inline-block;
我应该改变标签的顺序并给它们 display: inline-block;
The other answers about float I should not use. Most designers misunderstand float.
我不应该使用有关浮动的其他答案。大多数设计师误解了浮动。
Html
html
<div id="WholePage">
<aside></aside>
<section></section>
</div>
CSS
CSS
section
{
display : inline-block;
width : 48em;
height : 40em;
border-width : 0.1em;
border-style : dashed;
border-color : black;
}
aside
{
display : inline-block;
width : 12em;
height : 40em;
border-width : 0.1em;
border-style : dashed;
border-color : black;
}
回答by Flauwekeul
Add float: leftto your asideand section.
添加float: left到您的aside和section。
回答by Francois Borgies
you just need to add float: left;to your <aside>section.
你只需要添加float: left;到你的<aside>部分。
回答by Waschak
it's necessary to wrap the elements...
有必要包装元素......
CSS
CSS
#WholePage {
width: 100%;
border: 1px dotted red;
padding: 10px;
}
section {
display: inline-block;
width: 70%;
height: 300px;
border: 1px dashed green;
}
aside {
display: inline-block;
width: 25%;
height: 400px;
border: 1px dashed blue;
}
