Can I flow divs down the page instead of across it?
If I have a collection of div elements, I can use CSS to have them flow across the page and overflow onto the next line.
Here's a simple example:
<html>
<head>
<title>Flowing Divs</title>
<style type="text/css">
.flow {
float: left;
margin: 4em 8em;
}
</style>
</head>
<body>
<div class="container">
<div class="flow">Div 1</div>
<div class="flow">Div 2</div>
<div class="flow">Div 3</div>
<div class="flow">Div 4</div>
<div class="flow">Div 5</div>
<div class="flow">Div 6</div>
<div class="flow">Div 7</div>
<div class="flow">Div 8</div>
</div>
</body>
</html>
Is it possible to have the divs flow down the page instead of across it, so that they would flow down columns not along lines, but still occupy the same space as they would if they flowed across?
So for the example above, if they flowed into two lines of four divs, could I get the first column to contain Div1 and Div2 instead of Div1 and Div5?
迅速把它们扔在一起。
#column1 {float:left}
#column2 {float:left}
div div{height:100px;width:100px;border:1px solid}
<div id="column1">
<div>1</div>
<div>2</div>
</div>
<div id="column2">
<div>3</div>
<div>4</div>
</div>
No, it is not possible. Easiest workaround is to make separate columns by adding wrapper-DIVs, and then adding content to each column. This could also be generated dynamically either with Javascript or serverside.
No, you can't, but you could arrange them however you want by using absolute positioning. However, doing so means you have to explicitly set the position of each element, and that is usually undesired.
A simple adjustment to the markup can make this work though. Is the following what you wanted to see?
<html>
<head>
<title>Flowing Divs</title>
<style type="text/css">
.container {
float:left;
}
.flow {
margin: 4em 8em;
}
</style>
</head>
<body>
<div class="container">
<div class="flow">Div 1</div>
<div class="flow">Div 2</div>
<div class="flow">Div 3</div>
</div>
<div class="container">
<div class="flow">Div 4</div>
<div class="flow">Div 5</div>
<div class="flow">Div 6</div>
</div>
<div class="container">
<div class="flow">Div 7</div>
<div class="flow">Div 8</div>
</div>
</body>
</html>