2

这是我的html代码

<section id="usercontent">
        <h1>Section - User Content</h1>
        <article>
        <h1>Article - Left Content</h1>

        </article>
        <aside>
        <h1>Aside - Right Content</h1>

        </aside>
    </section>

这是我的CSS代码

section#usercontent {
    border:1px solid black;
    width:598px;
}
section#usercontent article {
    height:100px;
    width:146px;
    float:left;
    border:1px solid black;
}
section#usercontent aside {
    height:100px;
    width:450px;
    border:1px solid black;
}

这是第一个 css 的输出，但它是错误的，因为左侧仍有空间。

在此处输入图像描述

这是我的第二个输出，我只是改变我的 float:left; 浮动：section#usercontent 文章的右侧，它几乎是正确的，但文章一侧在右侧（必须在左侧），而侧面在左侧（必须在右侧）我尝试也将浮动放在除了section#usercontent，但它变得最糟糕，我试过很多次这是最接近的。需要任何可以解决此问题的建议，非常感谢！:)

在此处输入图像描述

4

3 回答 3

3

看看这个：http: //jsfiddle.net/3m9fm/1/

我将您的用户内容部分的宽度更改为 600 像素。该部分的宽度不足以容纳文章和旁白。将文章向左浮动，在右侧浮动，不要忘记使用 clear:both 清除浮动。（我已经在 jsfiddle 中为您添加了该内容）。如果您的 usercontent-width 是固定的，请将文章或放在一边小一点。

于 2012-08-25T15:13:24.887 回答
1

CSS：

section#usercontent {
    border:1px solid black;
    width:600px;
}
.clear {
    clear: both;
    visibility: hidden;
}
section#usercontent article {
    height:100px;
    width:146px;
    float:left;
    border:1px solid black;
}
section#usercontent aside {
    height:100px;
    float: left;
    width:450px;
    border:1px solid black;
}​

的HTML：

<section id="usercontent">
    <h1>Section - User Content</h1>
    <article>
    <h1>Article - Left Content</h1>

    </article>
    <aside>
    <h1>Aside - Right Content</h1>

    </aside>
<div class = "clear"></div>
</section>​​​​​​​​

我让它们都向左浮动，添加了一个“清晰”的 div 并调整了宽度以正确容纳列。这是你需要的吗？

于 2012-08-25T15:14:18.510 回答
1

CSS

#usercontent
{
    border:1px solid black;
    width:598px;
}
#usercontent article
{
    height:100px;
    width:146px;
    float:left;
    border-color:black;
    border-style:solid;
    border-width:1px 1px 0 0;
}
#usercontent aside
{
    height:100px;
    width:450px;
    border-top:1px solid black;
    float:left;
}
.clearfix:after
{
    clear:both;
    content:'.';
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    visibility:hidden
}
.clearfix
{
    display:block;
    zoom:1
}​

HTML

<section id="usercontent" class="clearfix">
    <h1>Section - User Content</h1>
    <article>
        <h1>Article - Left Content</h1>
    </article>
    <aside>
        <h1>Aside - Right Content</h1>
    </aside>
</section>​​​​​​​​

演示

于 2012-08-25T15:18:36.243 回答