通過左右，而不是上下

Question

我阿玲的div通過右

{ float: right;} 

但網頁它的結束（div的時候變得比4）第五格進入下其他的div同時擴大網頁頁面向下擴展。我不想要這個。我希望網頁的高度固定，網頁從左向右擴展，總是如何做到這一點。

Answer 1

使用min-width和display:table-cell例如小提琴手：http://jsfiddle.net/HarishBoke/c8G7V/

Answer 2

在頂級父元素（可能是'body'標籤）設置overflow-x屬性，在CSS中滾動。沿線的 東西：

body{ 
    overflow-x: scroll; 
} 

注意，這可能的解決方案可能無法預IE8友好。至於保持頁面高度固定，在CSS中定義高度並設置overflow-y爲隱藏。這將隱藏除父元素高度外的所有元素，而不是拉伸內容。

Answer 3

您需要一個包含其他div的大寬度的額外div。這將不允許您的身體容器在空間不足時添加新行。

HTML：

<div id="container" class="clearfix"> 
    <div id="wrapper" class="clearfix"> 
     <div id="div1">Div1</div> 
     <div id="div2">Div2</div> 
     <div id="div3">Div3</div> 
     <div id="div4">Div4</div> 
    </div> 
</div> 

CSS：

#container { 
    height: 275px; 
    overflow-x: auto; 
    overflow-y: hidden; 
    max-height: 275px; 
} 

#wrapper div { 
    float: right; 
    border:1px solid black; 
    width:200px; 
    height:100px; 
    display:inline-block; 
} 
.clearfix:after { 
    content: " "; /* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
} 

爲了使它更有活力，你可以先計算採取內格，然後在包裝一些ettra空間格設置相應

空間

Javascript：

var width=0; 
$('#wrapper>div').each(function() { 
    width =width+parseInt($(this).css('width')); 
}); 
wrapperWidth=width+100; 
$('#wrapper').css('width',wrapperWidth); 

更新小提琴：http://jsfiddle.net/ankur1990/mgxk5/3/