How to limit the number of elements per row
I'm trying to create this sort of layout in HTML:
开发者_C百科1 2 3 4 5 6 7 8 9 10
How would I limit how many is displayed per row?
Can you achieve this layout without the use of a table? If so, how?
Try having a "master" and insert elements right into it all with the same class:
<div id="master">
<div class="cell">
Your data goes here!
</div>
<!-- ... ... more cell elements ... ... ... -->
</div>
You'd need to fiddle with your CSS, but use a percent width for each 'cell' item...e.g.:
#master {
margin-left: 10%;
margin-right: 10%;
}
.cell {
width: 23%; /* This is for appx. 4 per row, it leaves 1% for margin, etc. */
height: 150px;
}
Basically i'd mess around with the percentages until it looks right to you. To determine what percentage to use for each cell you'll take 100 and divide it by the number of elements you want. Then you'll adjust that (downward) as appropriate.
I'm certain there's a better way to do this, but it's how I've achieved a similar effect in the past and the page turned out great.
Not entirely sure why you want to do this without a table
, but you could use the following css display
rules.
div#container{display: table;}
div#row{display: table-row;}
div#row div{display: table-cell; border:1px solid red;}
Border only for example
HTML
<div id="container">
<div id="row">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
<div id="row">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
</div>
http://jsfiddle.net/jasongennaro/c7wY7/
There is no way to specify the height and width (in number of cells) of an HTML table, as each cell must be specified by itself with <td>
and </td>
tags (standing for table data). You can, however, specify the width of the table in pixels or % of the page, or points, etc. You can also determine the alignment of the text, or anything else that can be defined by CSS. see css zen garden.
The code I would use for the basic table follows thus:
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
</table>`
精彩评论