1

我试图让一个 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;
}

任何有关如何获得此功能的建议或建议将不胜感激。我第一次遇到浮动部分的问题，现在真的很难过。

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

4

5 回答 5

3

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

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

什么时候使用浮动？

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

例子@jsfiddle

于 2013-03-14T15:54:53.603 回答
1

添加float:left到两个元素。

不要忘记清除你的花车。

于 2013-03-14T15:45:10.817 回答
0

你只需要添加float: left;到你的<aside>部分。

于 2013-03-14T15:46:56.947 回答
0

添加float: left到您的aside和section.

于 2013-03-14T15:45:29.187 回答
0

有必要包装元素...

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

例子@小提琴

于 2016-01-06T20:12:44.713 回答