css 如何限制每行的元素数

uelo1irk  于 2023-02-14  发布在  其他
关注(0)|答案(3)|浏览(169)

我尝试在HTML中创建这种布局:
如何限制每行显示的数量?
你能不使用表格就实现这种布局吗?如果可以,怎么做?

j5fpnvbx

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除以你想要的元素数量。然后你会适当地调整(向下)。
肯定有更好的方法来做到这一点,但这是我如何实现类似的效果在过去和页面变成伟大的。

ikfrs5lh

ikfrs5lh2#

不完全确定为什么要在没有table的情况下执行此操作,但可以使用以下css 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/

m1m5dgzv

m1m5dgzv3#

无法指定高度和宽度(以单元格数表示),因为每个单元格必须使用<td></td>标记单独指定(代表 * 表格数据 *)。但是,您可以指定表格的宽度,单位为像素、页面的百分比或磅等。您还可以确定文本的对齐方式。或任何其他可以由CSS定义的内容。参见css zen garden
我将用于基本表的代码如下所示:

<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>`

相关问题