html - 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

删除floatfrom.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;
}