我尝试在HTML中创建这种布局:如何限制每行显示的数量?你能不使用表格就实现这种布局吗?如果可以,怎么做?
j5fpnvbx1#
试着拥有一个“master”,并使用同一个类将元素直接插入其中:
<div id="master"> <div class="cell"> Your data goes here! </div> <!-- ... ... more cell elements ... ... ... --> </div>
你需要摆弄你的CSS,但使用一个百分比宽度为每个'单元格'项目...例如:
#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; }
基本上,我会一直摆弄百分比直到你觉得合适为止。为了确定每个单元格使用的百分比,你会用100除以你想要的元素数量。然后你会适当地调整(向下)。我肯定有更好的方法来做到这一点,但这是我如何实现类似的效果在过去和页面变成伟大的。
ikfrs5lh2#
不完全确定为什么要在没有table的情况下执行此操作,但可以使用以下css display规则。
table
display
div#container{display: table;} div#row{display: table-row;} div#row div{display: table-cell; border:1px solid red;}
超文本标记语言
<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/
m1m5dgzv3#
无法指定高度和宽度(以单元格数表示),因为每个单元格必须使用<td>和</td>标记单独指定(代表 * 表格数据 *)。但是,您可以指定表格的宽度,单位为像素、页面的百分比或磅等。您还可以确定文本的对齐方式。或任何其他可以由CSS定义的内容。参见css zen garden。我将用于基本表的代码如下所示:
<td>
</td>
<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>`
3条答案
按热度按时间j5fpnvbx1#
试着拥有一个“master”,并使用同一个类将元素直接插入其中:
你需要摆弄你的CSS,但使用一个百分比宽度为每个'单元格'项目...例如:
基本上,我会一直摆弄百分比直到你觉得合适为止。为了确定每个单元格使用的百分比,你会用100除以你想要的元素数量。然后你会适当地调整(向下)。
我肯定有更好的方法来做到这一点,但这是我如何实现类似的效果在过去和页面变成伟大的。
ikfrs5lh2#
不完全确定为什么要在没有
table
的情况下执行此操作,但可以使用以下cssdisplay
规则。超文本标记语言
http://jsfiddle.net/jasongennaro/c7wY7/
m1m5dgzv3#
无法指定高度和宽度(以单元格数表示),因为每个单元格必须使用
<td>
和</td>
标记单独指定(代表 * 表格数据 *)。但是,您可以指定表格的宽度,单位为像素、页面的百分比或磅等。您还可以确定文本的对齐方式。或任何其他可以由CSS定义的内容。参见css zen garden。我将用于基本表的代码如下所示: