0

私は HTML5 で基本的な Web サイトを作成しています。すべてのサイト構造が整っており、これまでのところすべてがうまく機能しています。

しかし、私はそれ自体が少しうまくいかないように見えるセクションを1つ持っています.

セクションの高さが決まるとすぐに、セクションは記事の上部に移動し、セクション内の実際のコンテンツはそのまま残ります。

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

私が問題を抱えているセクションは、「clients-box」のクラスを持つセクションです (最後のセクション)。

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 needs either float: left or float: right. You can add margin: 10px auto to center it with 10px top/bottom margins.

于 2013-04-12T15:01:21.423 に答える
0

float上記のすべてで使用しました<sections>。これは、それらがスペースを占有していないことを意味します。したがって、このボックスは、フローティング要素の下の上部に到達しました。

float: left最も簡単な方法は、このボックスにもa を適用することです。

@Mr. に触発された別の方法。clear:leftエイリアンは、このブロックに適用するだけです。

于 2013-04-12T15:01:40.073 に答える