Generate "table" with <div>
I'd like generate the representation below by <div>. The constraints :
- the full size = 100%
- the first + second column = 50%, the 3rd + 4th column = 50%
- the first开发者_运维技巧 column is smaller than the second, the second take "the rest of the place", same for column 3 and 4 :)
- the 3rd lines, combines 2 cells
- the last line combine 4 cells
- don't worry about the color :)
PS : no debate table vs div ;-)
Here is my proposed markup:
<div class="row">
<div class="col half">
<div class="col narrow">(1)</div>
<div class="col remainder">(2)</div>
</div>
<div class="col remainder">
<div class="col narrow">(1)</div>
<div class="col remainder">(2)</div>
</div>
</div>
<div class="row">
<div class="col half">(3)</div>
<div class="col remainder">(3)</div>
</div>
<div class="row">
(4)
</div>
And styles:
/* structure */
.row { clear: both; overflow: hidden; }
.col { float: left; }
.half { width: 50%; }
.narrow { width: 30%; }
.remainder { float: none !important; overflow: hidden; }
/* skin: just for demo */
.row { text-align: center; border-bottom: 1px solid #999; }
.half { background: #fcc; }
.narrow { background: #ccf; }
.remainder { background: #cfc; }
The first two rows are split into half. In each half are two cells: the first is called narrow and is floated. I put 30% on the width for this one just for the demo (note: that's 30% of the half of the row). The other column is called remainder and is not floated. It uses overflow to set its own rendering context, which means it fills the block to the right of the floated column.
You can have more floated columns (left or right), but only one remainder.
I put it up on jsfiddle: play with it.
Here, try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
div.row { width: 99.9%; border: 1px solid black; height: 1em;}
div.cell2 {border: 1px solid black; height: 1em; width: 49.9%; float: left;}
div.cell4 {border: 1px solid black; height: 1em; width: 24.9%; float: left;}
</style>
</head>
<body>
<div class = "row">
</div>
<div class = "row">
</div>
<div class = "cell2"></div><div class = "cell2"></div>
<div class = "cell4"></div><div class = "cell4"></div> <div class = "cell4"></div><div class = "cell4"></div>
</body>
</html>
The style is in the header, but it really should be in its own CSS file.
Sorry for the misread, my previous Answer was using TABLE when you wanted to use DIV. Also, note that if you want to use Borders, you have to offset the width percentage. (The other answer on this page may not display properly)
<style type="text/css">
.wrapper { width:100%; background-color:#ddd; text-align:center; float:left;}
.quarter-row { width:25%; background-color:#bbb; float:left; }
.half-row { width:50%; background-color:#999; float:left; }
.full-row { width:100%; background-color:#777; float:left; }
</style>
<div class="wrapper">
<div class="quarter-row">1</div><div class="quarter-row">2</div><div class="quarter-row">3</div><div class="quarter-row">4</div>
<div class="half-row">1 (50% width)</div><div class="half-row">2 (50% width)</div>
<div class="full-row" >1 (100% width)</div>
</div>
加载中,请稍侯......
精彩评论