浮動Div，最後部分可見

Question

我有一個佈局，其中將有6個Divs向左浮動以製作6列。第6列可能會導致這些花車的總寬度比大多數用戶的車窗寬。是否有可能讓第6個部分可見（比窗口更寬的部分被隱藏起來），而不是第6個列在其他部分之下換行。下圖。

         \ 
    +----+ +----+ +----+ +----+ +----+ +--/ 
    | 1 | | 2 | | 3 | | 4 | | 5 | | 6\ 
    | | | | | | | | | | |/
    | | | | | | | | | | | \ Screen Edge 
    | | | | | | | | | | |/<--- 
    +----+ +----+ +----+ +----+ +----+ +--\ 
             /

Answer 1

當然，你可以用下面的標記和CSS做到這一點：

HTML

<div id="columns"> 
    <div id="wrap"> 
     <div class="col"></div> 
     <div class="col"></div> 
     <div class="col"></div> 
     <div class="col"></div> 
     <div class="col"></div> 
     <div class="col"></div>  
    </div> 
</div> 

CSS

#columns { 
    width: 600px; 
    overflow: hidden; 
} 

#wrap { 
    /* width of 6 columns and their margins */ 
    width: 660px; 
} 

.col { 
    float: left;  
    width: 100px; 

    /* visual styles only */ 
    margin: 5px; 
    height: 100px; 
    background: red; 
} 

你可以看到the result here。

#columns容器的原因是將溢出設置爲隱藏。 #wrap然後確保浮點數如果沒有足夠的空間時不會丟失（即使溢出：隱藏集合，如果父容器不夠寬，浮點數將下降）。

Answer 2

將6個div放入具有固定寬度的第7個。

<div class='wrapper'> 

<div class='floater'></div> 
<div class='floater'></div> 
<div class='floater'></div> 
<div class='floater'></div> 
<div class='floater'></div> 
<div class='floater'></div> 

</div> 

.wrapper{ 
    width:1200px; 
} 
.floater{ 
    width:200px; 
    float:left; 
}