Question

我正试图水平排列div，即使它们离屏。我正在使用display：box;

<div id="container">   
   <div class="box">
       1
   </div>
   <div class="box">
       2
   </div>
   ....
   ....
</div>

.box{
    background-color: #7f94a7;
    color: #fff;
    height: 5.2rem;
    width: 6rem;
    display:table;
}

#container{
    display: box;
    display: -webkit-box;
}

查看jsfiddle here。

这在Chrome中运行良好，但在Internet Explorer 10中，该框垂直对齐....

Answer 1

不确定display:table类.box应该做什么 - 里面没有任何单元格或行，所以它根本不是表格式的。表格框大小模型用于弯曲单元格的宽度。看一下这个例子，看看display:table的实际效果......调整输出面板的大小，看看会发生什么：http://jsfiddle.net/vz33sfwc/

.box{
    display:table-cell;
}
#container{
    display:table;
}

听起来你真的希望这些盒子不会弯曲，而是要离开屏幕。为此，我们将框设置为使用display:inline-block - 这使得它们在一条线上彼此相邻。然后，我们告诉容器如何使用white-space: nowrap;

处理内联元素的空格

.box{
    display: inline-block;
}
#container {
    white-space: nowrap;
}

在此处查看此操作，再次调整输出面板的效果：http://jsfiddle.net/k9yp05mj/ - 注意我们得到一个水平滚动条，框不会弯曲。

<强>文档

CSS whitespace - https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
CSS display - https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 2

将您的display: box;更改为display: inline-box;并使用overflow:来保持或隐藏径流，使其无法显示。

如上所述，white space: nowrap;关于内容修复问题。

CSS：

.box{
background-color: #7f94a7;
color: #fff;
height: 5.2rem;
width: 6rem;
display: inline-block;
}

#container{
display: box;
display: -webkit-box;
overflow-x: auto;
white-space: nowrap;
}

Answer 3

尝试使用＆＃34; display : inline＆＃34;对于孩子div.keep宽度自动，即取决于内容，它将调整检查小提琴 - http://jsfiddle.net/invincibleJai/p5tebcua/45/

代码：

＆＃13;

.box{
    background-color: #7f94a7;
    color: #fff;
    height: 5.2rem;
    width: 6rem;
    display:inline;
    padding:0.2em;
}

＆＃13;

<div id="container">   
    <div class="box">
        1
    </div>
    <div class="box">
        2
    </div>
    <div class="box">
        3
    </div>
    <div class="box">
        4
    </div>
    <div class="box">
        5
    </div>
    <div class="box">
        6
    </div>
    <div class="box">
        7
    </div>
    <div class="box">
        8        
    </div>
    <div class="box">
        9
    </div><div class="box">
        10
    </div>
    <div class="box">
        11
    </div><div class="box">
        12
    </div>
    <div class="box">
        13
    </div>
</div>

＆＃13;

即使在屏幕外，也可以水平对齐div

3 个答案: