设置部分高度时的CSS布局问题

Question

我正在用 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/

Answer 1

.clients-box 需要 float: left 或 float: right。您可以添加 margin: 10px auto 以 10px 顶部/底部边距居中。