CSS DIV包装线高度

Question

我正在建立一个DIV网格，我想要将它内联显示。DIVs包含和图像+文本的变量，理想情况下，DIVs本身应该被限制在一个固定的宽度。

.playerbox {
    width: 100px;
    border: 1px solid;
    float: left;
    margin: 10px;
}

我发现，在文本包装的DIVs上，网格不像预期的那样内联显示--下一行的顺序会受到影响。

这里的例子：http://jsfiddle.net/qC72A/

假设我需要设置一条线高或类似的线，但不确定处理这个问题的最佳方法。

Answer 1

从float中删除.playerbox并将其设置为inline-block。然后，可以将vertical-align设置为顶部、中部或底部，具体取决于您希望它们对齐的方式。

http://jsfiddle.net/qC72A/9/

​

​

Answer 2

为每个.playerbox设置静态高度

.playerbox { height:200px; }

http://jsfiddle.net/avbXD/中的分叉示例

Answer 3

我认为您需要使用column-count，也需要用div <div id="container" class="cols">包装播放盒，检查这个Fiddle http://jsfiddle.net/qC72A/11/

<div id="container" class="cols">
<div class="playerbox"><a href="index.php?act=update&id=1"><img  class="greyscale" src="img/00068200_Image.jpg"><p>Maurice Blair</p></a></div>
    </div>

CSS

#container {
    width: 100%;
    margin: 20px auto;
}
.cols {
    -moz-column-count:5;
    -moz-column-gap: 3%;
    -moz-column-width: 18%;
    -webkit-column-count:5;
    -webkit-column-gap: 3%;
    -webkit-column-width: 18%;
    column-count: 5;
    column-gap: 3%;
    column-width: 18%;
}
.playerbox {

    border: 1px solid;

    margin-bottom: 10px;
}

.playerbox img {
    width: 100px;
    height: 100px;
}