I have a page with a dynamic number of boxes that I would like to distribute over several columns and lines.
I have the following wishes:
Ideally I'dd like the page to be responsive, so the number of columns should adjust to the browser width. But after reading and watching a lot of examples I don't see how this is possible in combination with the justifying, as that always needs a row div.
So I'm going for a fixed number of columns. With all kinds of examples I came to this solution, but there is still one challenge: getting each div to have the same height:
http://jsfiddle.net/johannesklapwijk/BQJ6A/
HTML:
<div class='row'>
<div class='cell'>a<br/>b</div>
<div class='cell'>a<br/>b<br/>c</div>
<div class='cell'>a<br/>b</div>
<span class='stretch'/>
</div>
CSS:
.row {
text-align: justify;
border: 1px solid red;
padding: 0;
}
.cell {
display: inline-block;
width:30%;
height: 100%; /* does not get the height of the parent div */
border: 1px solid black;
background-color: green;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
I have two questions I guess:
Thanks!
So like this? (Change the con width to 100% if you want it the size of the browser)
HTML:
<div class="con">
<div class="col">asd</div>
<div class="col">asdasdasd
<br />asdas
<br />asdasd
<br />asdasd
<br />asdasd</div>
<div class="col">asd</div>
</div>
CSS
.con {
height: 100%;
width: 400px;
display: table;
table-layout: fixed;
}
.col {
display: table-cell;
border: #000000 solid 1px;
}
And for if you want it the size of the browser change width
on .con
width: 100%;
and if you want the spacing like you have on yours add border-spacing
to .con
border-spacing: 10px;
I've been trying to find something that meets my needs and I'm afraid CSS only is not enough.
I guess the jQuery freewall plug-in might give me what I need, even though it might be a bit heavy for my wishes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.