CSS DIV包装线高度

Question

我正在设置一个DIV的网格，我想要内联显示。 DIV包含变量的图像+文本，理想情况下，DIV本身应该被约束到固定的宽度。

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

我发现在文本换行的DIV上，网格没有按预期显示内联 - 下一行的顺序会受到影响。

此处示例：http://jsfiddle.net/qC72A/

假设我需要设置行高或类似，但不确定处理此行的最佳方法。

Answer 1

为每个.playerbox

设置静态高度

.playerbox { height:200px; }

http://jsfiddle.net/avbXD/

上的分叉示例

Answer 2

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

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

Answer 3

我认为您需要使用column-count并且还需要使用div <div id="container" class="cols">包装播放器框。检查此小提琴http://jsfiddle.net/qC72A/11/

<强> HTML

<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;
}