Question

我正在尝试制作一个2行可滚动界面。我发现我很难解释它，但它应该是什么样子。 http://valeness.tk

当我添加更多项目元素时，问题就出现了，它们打破了高度边界并开始堆叠成3行。我希望它保留2行并使用overflow-x：scroll属性，以便它可以向左和向右滚动。

HTML

<!DOCTYPE html>
<HTML>
<head>
<meta charset="UTF-8">
<title>Accomadere Vive</title>
<link rel="stylesheet" type="text/css" href="assets/style.css">

</head>

<body>

<div class="top">
<div class="top-left">
<a href="#" class="nav" id="active">HOME</a>
<a href="#" class="nav" id="inactive">ABOUT ME</a>
<a href="#" class="nav" id="inactive">PROJECTS</a>
<a href="#" class="nav" id="inactive">BLOG</a>
</div>
<div class="top-right">
<div class="prof">James Horton</div>
</div>

</div>

<div class="main">

<div class="item-container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>

</body>
</HTML>

CSS

body
{
background-color: #090909;
}

div.top
{
width: 99%;
height: 110px;
padding: 5px;
/*border: 1px solid blue;*/
}

div.top-left
{
position: relative;
height: 100px;
width: 40%;
left: 5px;
margin-top: 5px;
margin-bottom: 5px;
/*border: 1px solid red;*/
}

div.prof
{
position: relative;
height: 30px;
width: 150px;
line-height: 30px;
text-indent: 5px;
font-family: Century Gothic, sans-serif;
color: #00ff00;
background-color: #111111;
font-size: 18px;
font-style: italic;
}

div.prof:after
{
content: '';
width: 30px;
height: 30px;
position: absolute;
margin-left: -150px;
background-image: url('avatar.png');
background-size: 30px 30px;
background-color: #111111;
border-left: 4px solid #00ff00;
}

div.top-right
{
position: relative;
float: right;
height: 100px;
width: 40%;
right: 5px;
margin-top: -107px;
/*border: 1px solid red;*/
}

a#active.nav
{
font-family: Century Gothic, sans-serif;
color: #00ff00;
font-size: 18px;
padding-left: 20px;
padding-right: 15px;
text-decoration: none;
}

a#inactive.nav
{
font-family: Century Gothic, sans-serif;
color: #999999;
font-size: 18px;
padding-left: 20px;
padding-right: 15px;
text-decoration: none;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}

a#inactive.nav:hover
{
font-family: Century Gothic, sans-serif;
color: #FFFFFF;
font-size: 18px;
padding-left: 20px;
padding-right: 15px;
text-decoration: none;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}

div.main
{
display: block;
position: absolute;
height: 74%;
width: 96%;
padding: 15px;
border: 1px solid green;
}

div.item-container
{
width: 85%;
height: 400px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
border: 1px solid blue;
}

div.item
{
width: 300px;
height: 170px;
margin-left: 15px;
margin-top: 15px;
transform-origin: 50% 50%;
background-color: #202020;
float: left;
}

有问题的元素是div.item和div.item-container。

Answer 1

如果您正在制作可视化表格，那么我建议您使用CSS tables。与HTML表不同，它们纯粹是可视化的，但您需要具有适当的HTML结构。如果您需要将这些视为一个表，我建议除了一组简单的div之外还有一些语义含义。也许它有两个不同的列表 - 所以你可以在语义上将它们标记为ul，然后应用表格样式。

为了适应变化以实现这一目标，我已经进行了一次视图更改see in this fiddle。

但是，它的要点是在HTML中添加另一个图层来捕获“行”：

<div class="item-container">
    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>

    </div>
    <div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

然后设置每个样式：

.item-container > * {
    display:table-row;
}

div.item-container
{
    /* Identical attributes ignored */
    display: table;
}

div.item进行了一些重大更改，使其样式相同，包括添加边框样式（表格单元格没有边距）和添加最小宽度，否则单元格会随表格缩小。

div.item
{
    min-width:300px;
    border:15px solid #090909;
    background-color: #202020;
    display:table-cell;
}

然后，将正确的overflow添加到正确的元素中（我会让你选择应该去的地方，但是在div.main的小提琴中：

overflow:auto;

Answer 2

看看下面的小提琴应该修复它：
http://jsfiddle.net/pbEgp/1/

通过添加以下内容解决了这个问题：

display: inline-block;

并删除

float: left;

在项目类上

，然后为容器添加：

overflow-x: auto;
white-space: nowrap;

值得注意的是，你要么必须将行包裹在行中，要么将行分开，如同在小提琴中一样。

如何在父级的网格中创建一堆div？

2 个答案: