So, I'm trying to create a div class that will display in a row and then automatically wrap to the next row when all the space is taken up.
.contributor_thumbnail {
display: block;
float: left;
width: 150px;
height: 150px;
border: 1px solid #777;
}
So that when I call the code like this:
<div class="contributor_thumbnail">thumb here</div>
<div class="contributor_thu开发者_StackOverflow中文版mbnail">thumb here</div>
<div class="contributor_thumbnail">thumb here</div>
<div class="contributor_thumbnail">thumb here</div>
The divs will sit side by side.
Right now the divs just overlap. Any ideas?
Edit: Completely misread your question... Thought you said you didn't want it to be in a row. D'oh, well I'll leave this here just in case someone didn't know.
You're looking for the CSS clear
property. Just add clear: both;
to your CSS.
http://www.w3.org/TR/CSS2/visuren.html#flow-control
Fiddle http://jsfiddle.net/zRKYM/
精彩评论