CSS DIV包装线高度

Question

I'm setting up a grid of DIV's which I want displayed inline. The DIVs contain and image + text of variable, and ideally the DIVs themselves should be constrained to a fixed width.

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

I'm finding that on DIVs where the text wraps, the grid does not display inline as expected - the order of the next row(s) is affected.

Example here: http://jsfiddle.net/qC72A/

Presume I need to set a line height or similar, but not sure of the best way to handle this.

Answer 1

Set a static height for each .playerbox

.playerbox { height:200px; }

Forked example at http://jsfiddle.net/avbXD/

Answer 2

Remove the float from .playerbox and set it to inline-block instead. Then you can set vertical-align to top, middle, or bottom depending on how you want them to align.

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

Answer 3

I think you need to use column-count and also need to wrap the playerboxes with div <div id="container" class="cols"> Check this Fiddle 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;
}