make divs flow while one is higher than the rest of them_问答_开发者

make divs flow while one is higher than the rest of them

开发者 https://www.devze.com 2023-01-05 02:34 出处：网络

I have the following css code .container { width:800px; background-color:yellow; margin:auto; display:table;

相关专题：css

I have the following css code

.container {
width:800px;
background-color:yellow;
margin:auto;
display:table;
}
.cell {
float:left;
display:table-cell;
background-color:blue;
width:100px;
height:50px;
}
.middel{
background-color:purple;
height:100px;}
.wrong{
background-color:green;
}

and the following html code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title> new document     </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" media="screen" href="grid.css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" >
</head>
<body>
<div class="container">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell middel">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell wrong">9</div>
<div class="cell wrong">10</div>
<div class="cell wrong">11</div>
<div class="cell wrong">12</div>
<div class="cell">13</div>
<div class="cell">14</div>
<div class="cell">15</div>
<div class="cell">16</div>
&开发者_如何学Pythonlt;/div>
</body>
</html>

this is a link to the html page and an image on how I want the layout to look and how it actually looks , its difficult to explain in words

example and image with the correct layout

how do I get the div's after the purple div on the left side of the purple div and make the other ones flow to the right side?

in the end result you should be able to place the purple div anywhere between the other div's and the flow should be the same.

hope I explained it clearly

thanks and greetings Mark,

Greetings Mark,

At the risk of offending purists, this looks like a job for tables! ;-) Using divs is more correct, but the implementation is FAR easier with tables. If you need more help with the code for a table, let me know and I should be able to whip something up pretty fast.