Question

我正在尝试设计一个简单的电子商务网站，因为我的footer标记文字显示在section标记旁边。我不知道我在哪里做错了。

HTML

    <aside id="categories">
        <header id="headings" class="background_div">Categories</header>
        <nav>
            <ul>
                <li>Staples</li>
                <li>Oils</li>
                <li>Vegetables</li>
                <li>Fruits</li>
            </ul>
        </nav>    
    </aside>

    <div id="bestsellers">
        <header id="headings" class="background_div">Bestsellers</header>
        <article class="productarticle">
            <figure>
                <img src="faded-short-sleeve-tshirts.jpg" alt="cabbage"/>               
            </figure>
            <div class="align_text">
                <header id="headings">
                    <span class="productarticlename">Cabbage 1</span>
                </header>
                <p class="productprice">$10</p>
                <div class="addtocart">
                    Add to Cart
                </div>
            </div>    
        </article>

        <!-- 4 More Article Tags will be included here -->   
    </div>    
</section>

<footer>
    <div clas="heading">This is footer text</div>
</footer>

CSS

   #content{
        width:  100% px;
        display: block;
    }

    .carousel_img{
        width: 1000px;   
    }

    #headings{
        font-weight: bold;
    }

    #categories{
        float: left;
    }    
    #bestsellers{
        float: left;
        margin-left: 25px;
        margin-right: 0 px;
        width: 80%;
        height: 100%;
        margin-bottom: 20 px;
    }

    .background_div{
        background: lightgreen;    
    }

    .productarticle{
        float: left;
    }

    .align_text{
        text-align: center;
    }

请帮帮我。我希望section标签中的内容和页脚标签中的文本以单独的行显示。

JS-FIDDLE DEMO

Answer 1

请参阅此fiddle

由于您的#content包含浮动元素，因此您还需要浮动#content div。因此，将float:left;添加到#content。

现在要从页脚中清除此浮动效果，您需要将clear:both;添加到页脚CSS。因此改变的CSS就像

#content{
    width:  100% px;
    display: block;
    float:left;
}
footer{
    clear:both;
}

<footer>显示在<section>元素内容旁边的文本，而不是在新行中显示

1 个答案:

请参阅此fiddle