0

我正在用 HTML5 编写一个基本的网站，我已经准备好所有的网站结构，到目前为止一切都运行良好。

但是，我有一个部分似乎有点自行消失。

一旦我到达该部分的高度，这些部分就会移动到顶部两个部分后面的文章顶部，该部分中的实际内容保持在原位。

    <article><section class="welcome-box">
    <section class="welcome-wrapper">

        <div class="welcome-hello">
            <div class="welcome-hellotext">HELLO, WELCOME TO SAA RECRUITMENT </div>
        </div>

        <div class="welcome-line"></div>

        <div class="welcome-textbox">
            <div class="welcome-textboxtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
        </div>

        <div class="welcome-button">
            <div class="welcome-buttontext">READ MORE</div>
        </div>
    </section>
</section>

<section class="home-slider">
    <div class="slider-wrapper">
        <div id="slider">
            <div class="slide1">
                <img src="images/slide_1.jpg" alt="" />
            </div>
            <div class="slide2">
                <img src="images/slide_2.jpg" alt="" />
            </div>
            <div class="slide3">
                <img src="images/slide_3.jpg" alt="" />
            </div>
            <div class="slide4">
                <img src="images/slide_4.jpg" alt="" />
            </div>
        </div>
        <div id="slider-direction-nav"></div>
        <div id="slider-control-nav"></div>
    </div>
</section>
<!-- Slider Script -->
<script type="text/javascript">
    $(document).ready(function() {
        var slider = $('#slider').leanSlider({
            directionNav: '#slider-direction-nav',
            controlNav: '#slider-control-nav'
        });
    });
</script>
 <!-- End Slider Script -->
<section class="about-box">
    <div class="about-boxtitle">TITLE HERE</div>
    <div class="about-boxline"></div>
    <div class="about-boxtext"></div>
</section>

<section class="news-box">
    <div class="news-boxtitle">NEWS</div>
    <div class="news-boxline"></div>
    <div class="news-boxtext"></div>
</section>

<section class="clients-box">
    <div class="clients-boxtitle">CLIENTS</div>
    <div class="clients">client</div>
    <div class="clients">client</div>
    <div class="clients">client</div>        
</section>   

    </article>

我遇到问题的部分是一类“客户盒”（最后一节）

这是CSS：

.clients-box {
        width: 960px;
        margin-top: 10px;
        background-color: #FFF;
    }

    ul.clients {
        width: 940px;
        height: 40px;
        margin: 0 auto 0;
    }

    ul.clients li.client {
        width: 150px;
        height: 40px;
        display: inline-block;
        background-color: #039;
        clear: both;

该网站位于此处：http ://dev.saarecruitment.com/

4

2 回答 2

0

.clients-box需要float: left或float: right。您可以margin: 10px auto使用 10 像素的顶部/底部边距将其添加到中心。

于 2013-04-12T15:01:21.423 回答
0

您已经使用float了以上所有内容，<sections>这意味着它们不占用空间。因此，这个盒子到达了顶部，在浮动元素的下方。

最简单的方法是也将 afloat: left应用于此框。

另一种方法，灵感来自@Mr。外星人将只适用clear:left于这个块。

于 2013-04-12T15:01:40.073 回答