Question

我通过正确的方式将div改为

{ float: right;}

但页面结束时（当div超过4时）第五个div在其他div下面，而页面扩展为down。我不想要这个。我希望页面的高度变得固定，网页从左到右展开，我怎么能这样做。

Answer 1

在fiddler中使用min-width和display:table-cell示例：http://jsfiddle.net/HarishBoke/c8G7V/

Answer 2

在顶级父元素（可能是'body'标签）上设置CSS中的overflow-x属性进行滚动。有点像：

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

为了使它更具动态性，您可以先计算内部div占用的空间，然后相应地计算包装div上的某些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/

通过左右而不是上下来扩展网页

3 个答案: