Question

我有一个带有一个主要div的html文件

<body><div id="main">.....</div></body

我想将html内容划分为具有相同高度的行以及它们之间的一些填充。它看起来好像我手动将内容复制到一个包含多行的表中，每行都有边框，并将内容平均分配到其中。

有没有css可以做到这一点？

Answer 1

也许你可以使用表格

<div id="main">
<table>
    <tr class="DataRow"><p>Content</p></tr>
    <tr class="DataRow"><p>Content2</p></tr>
    <tr class="DataRow"><p>Content3</p></tr>
    <tr class="DataRow"><p>Content4</p></tr>
    <tr class="DataRow"><p>Content5</p></tr>
</table>

CSS

.DataRow{
padding: 10px;
border: 1px solid black;

}

希望这有帮助

Answer 2

离开我的头顶，也许在下方可能会指向正确的方向？只是一个边界和一些填充？默认情况下div标签是块元素，这意味着它们无论如何都驻留在新行上（这可以通过css进行更改）

要划分内容，您需要使用javascript

str.length（）并将此值除以2，并将[0]置于div 1中，将[1]置于div 2

jquery的： -

$("#row1").text([0]) 
$("#row2").text([1])

CSS -

<style type="text/css">
.row { border:solid 1px #000; padding:5px }
</style>

<div id="main">
   <div id="row1" class="row">Content row 1</div>
   <div id="row2" class="row">Content row 2</div>
</div>

将HTML内容垂直显示为行

2 个答案: