How to get different height html divs to float up
I\'ve got a series of dynamically created divs of varying heights in a container div.
Varying text...<
-
Try using jQuery Masonry. It could be a great fix for this.
http://masonry.desandro.com/
Or try Isotope, which has much better performance
http://isotope.metafizzy.co/
讨论(0)
-
You should try placing each column of div's into it's own container, and float them left. For example:
<div id='container'>
<div id='col1'>
<div id='d1'>asdf</div>
<div id='d2'>asdf</div>
</div>
<div id='col2'>
<div id='d3'>asdf</div>
<div id='d4'>asdf</div>
</div>
</div>
etc, etc.
each column floats left against one another and each item in the columns flows vertically quite well... here's an example: http://jsfiddle.net/V6z8F/
讨论(0)
-
If you want the divs to stack vertically in all browser agents, you'll need to wrap each 'section' in a containing element. Here's an example of what I mean.
the css
// let's reset our elements
.site-container,
.element-container,
.my-element {
margin: 0;
padding: 0;
}
.site-container {
display: block;
width: 960px;
margin: 0 auto; /* centers your site container on the page */
clear: both; /* basic float clearing */
}
.element-container {
display: inline-block;
float: left;
width: 300px; /* we'll have 3 sections width 10px spacing */
margin-right: 10px;
}
.element-container.last {
margin-right: 0;
}
.my-element {
width: 280px; /* 300 - 20px [total padding] = 280px */
margin-bottom: 10px; /* add a bottom margin */
padding: 10px; /* makes our element 320px wide */
}
// make background-color classes
.bg-red {
background-color: #ff0000;
}
.bg-blue {
background-color: #3b8acd;
}
the markup
<html>
<head>
<title>Vertical boxes!</title>
</head>
<body>
<div class="site-container">
<div class="element-container">
<div class="my-element bg-red">
1
</div>
<div class="my-element bg-blue">
2
</div>
</div><!-- /element-container -->
<div class="element-container">
<div class="my-element bg-blue">
3
</div>
<div class="my-element bg-red">
4
</div>
</div><!-- /element-container -->
<div class="element-container last">
<div class="my-element bg-red">
5
</div>
<div class="my-element bg-blue">
6
</div>
</div><!-- /element-container -->
</div><!-- /site-container -->
</body>
</html>
As far as the seventh div you have, I would suggest making it span across the entire site-container. It's aesthetically pleasing :)
讨论(0)
-
Two alternatives to Masonry that work very well:
Salvattore (CSS driven): http://salvattore.com/
Isotope: http://isotope.metafizzy.co/index.html
讨论(0)
-
Recently I did this for my project.
Add CSS for the parent class:
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
Example:
<div class="parent">
<div class="child"></div>
</div>
讨论(0)
加载中...
- 热议问题