2013-04-12 32 views
0

我正在寫一個基本的HTML5網站,我有所有的網站結構,到目前爲止一切工作都很順利。設置截面高度時的css佈局問題

但是,我有一個部分看起來有點獨立。

只要我有高度的部分的部分移動到文章的頂部後面的部分內的實際內容保持在位置的頂部兩節。

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

回答

0

.clients-box需要float: leftfloat: right。您可以添加margin: 10px auto以10px頂部/底部邊距爲中心。

+0

太簡單了!謝謝 – chinds

+0

太棒了!請爲未來的用戶標記「最佳答案」。 – Mooseman

0

您在以上所有<sections>上使用過float這意味着它們沒有佔用空間。因此這個盒子在漂浮的元素下到達頂部。

最簡單的方法是將float: left應用於此框。

另一種方法,靈感來自@Mr。外星人將只適用clear:left到這個區塊。

+0

現在全部排序,非常感謝。 – chinds