Question

所以，如果我有这样的巢：

<div>
    <div></div>
    <div></div>
    <div></div>
    ...
</div>

是否可以使用纯 CSS制作动态水平布局？ Small Window Layout

基本上，此屏幕只能容纳2个垂直内容

Bigger Window Layout

因此，此屏幕可以容纳3个垂直内容

正文在固定底部显示水平滚动条。屏幕上可能会有更多内容。 内容会向左流动，但在垂直空间已满时会流入新列。附加内容 如箭头所示 。

两个屏幕不应该显示垂直滚动条。那么它是否可能以及如何？我尝试使用display: flex，但它没有执行上面的顺序效果。 Javascript将是我的最后一招。

请参阅jsFiddle：http://jsfiddle.net/W7z4s/10/（请注意，我希望.outer div为填充体，滚动条位于底部）

请支持 Firefox和Chrome ！

Answer 1

我认为这可以通过以下方式实现：nth-child用于清除浮动和媒体查询，例如@media屏幕和（max-height：700px），以根据高度更改要清除的元素。

Answer 2

我尝试使用display：flex，但确实如此不要做上面的订单效果。

那对我有用：

.outer {
    width:500px;
    height:500px;
    overflow:auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

<强> Updated fiddle

注意：这当前在Firefox中不起作用，因为它仍然不支持flex-wrap属性，但是根据caniuse - 这将在版本28中得到支持

编辑：（Updated FIDDLE which includes support for Firefox）

使用@supports我们可以暂时使用-moz-colums-count for Firefox，只要不支持flex-wrap - 有点像Modernizr，但有CSS。

这里的好处是Firefox supports them。

所以如果我添加以下代码：

@supports (not (flex-wrap: wrap)) and (-moz-columns: 4) {
    .outer { 
        -moz-column-count: 4;
        column-count: 4;
        display: block;
        width:120%;
    }
}

现在，Firefox将使用CSS列，而其他浏览器将使用flexbox。

Answer 3

现在这很乱，我不推荐它，但它可能有点工作。使用css变换，我们可以旋转包含div 90deg，然后以另一种方式旋转子div。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>vertical rows - messy hack</title>
<style>
html, body, .wrapper {
    background-color: #666;
    height:100%;
    width:100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.wrapper {
    padding: 50px;
    margin: 5%;
    height: 90%;
    width:90%;
    position: relative;
}
.container {
    position: absolute;
    left:15px;
    top: 15px;
    height:;
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -webkit-transform:rotate(-90deg);
}
.container div {
    width:150px;
    height: 150px;
    background-color: #ccc;
    float:right;
    margin: 20px;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); /* IE 9 */
    -webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
}
</style>
</head>

<body>
<div class="wrapper">
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
</div>
</div>
</body>
</html>

CSS - 水平Div布局

3 个答案:

编辑：（Updated FIDDLE which includes support for Firefox）