HTML

Question

我试图让一个Aside标签浮动到带有CSS的Section标签旁边但到目前为止没有太多运气。

下面是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>

以下是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;
}

如何获得此建议或建议将不胜感激。我第一次遇到这个浮动部分的问题，为什么现在真的很难过。

非常感谢所有回复，它们都很有用并解决了我的问题。

Answer 1

我应该更改代码的顺序并给它们display: inline-block;

关于浮动的其他答案我不应该使用。大多数设计师误解浮动。

When use float?

HTML

<div id="WholePage">
    <aside></aside>
    <section></section>
</div>

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;
}

Example @ jsfiddle

Answer 2

将float:left添加到两个元素中。

不要忘记clear your floats。

Answer 3

将float: left添加到您的aside和section。

Answer 4

您只需将float: left;添加到<aside>部分。

Answer 5

包装元素是必要的......

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;
}

example @ fiddle

Float旁边的部分HTML5

5 个答案:

HTML

CSS