我正在尝试使用 CSS3 列从上到下排序一些 div,然后从左到右排序。它似乎工作得很好,但我遇到了这个问题,如下图所示。我给每个 div 一个背景,当我调整窗口的高度时,不是按照我的意愿将整个背景移动到一个块中,而是逐步添加它,将背景分隔在两列之间。这看起来真的很糟糕。我想知道是否有一种方法可以保留我的 div 的背景,以便一旦窗口变得太小而无法容纳 div 的一个像素高度,它会将整个 div 移动到下一列。
其次,我想根据窗口大小将页面上的列居中。我希望它可以在 Chrome(任何最新版本)、Firefox(任何最新版本)和 IE 10 中运行。
你可以在这里摆弄:http: //jsfiddle.net/eE3z6/
#mainContent /* The containing div */
{
position: absolute;
top: 50px;
bottom: 50px;
margin: 10px;
column-width: 400px;
-webkit-column-width: 400px;
-moz-column-width: 400px;
}
.blockData /* The divs inside are all of this class */
{
position: relative;
width: 380px;
height: 30px;
padding: 4px;
margin: 0px 0px 10px 0;
border: 4px outset grey;
background: lightgrey;
}