我想在div中创建合理的元素。它有效,但元素之间的空间不同。我希望它看起来像在一张桌子里。内部div需要像变量填充这样的东西。
我不知道并且无法计算元素的宽度,因此我无法对其进行样式修复或将其放入表中。
我创建了一个jsfiddle。
表格
<table cellspacing="5">
<tr>
<td>short content</td>
<td>bit longer content</td>
<td>content</td>
<td>this is a very long content</td>
<td>short content</td>
<td>content</td>
</tr>
</table>
<table cellspacing="5">
<tr>
<td>short content</td>
<td>this is a very long content</td>
<td>short content</td>
<td>content</td>
<td>this is a very long content</td>
<td>short content</td>
</tr>
</table>
DIV
<div class="elem">
<div>content</div>
<div>bit longer content</div>
<div>short content</div>
<div>this is a very long content</div>
<div>short content</div>
<div>content</div>
<div>short content</div>
<div>this is a very long content</div>
<div>short content</div>
<div>content</div>
<div>this is a very long content</div>
<div>short content</div>
<div>content</div>
</div>
CSS
table{
width: 100%;
}
td{
background-color: #ccc;
text-align: center;
padding: 5px;
}
.elem{
text-align: justify;
width: 100%;
}
.elem div{
display: inline-block;
margin: 5px;
padding: 5px;
background-color: #ccc;
text-align: center;
}
答案 0 :(得分:2)
您可以尝试display: flex
。你可以用它做一些很酷的东西。
这是一个有用的链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
答案 1 :(得分:0)
当您使用div
时,删除HTML结构中每个display:inline-block;
之间的空格。因此,它不会占用可变空间。
<div class="elem">
<div>blabla</div><div>blablablablablabla</div><div>blablablabla</div><div>blablablablablablablabla</div><div>blablablabla</div><div>blabla</div><div>blablablabla</div><div>blablablablablablablabla</div><div>blablablabla</div><div>blabla</div><div>blablablablablablablabla</div><div>blablablabla</div><div>blabla</div><div>blablablabla</div><div>blablablablablablablabla</div><div>blablablabla</div><div>blabla</div><div>blablablablablablablabla</div><div>blablablabla</div><div>blabla</div><div>blablablabla</div><div>blablablablablablablabla</div><div>blablablabla</div><div>blabla</div>
</div>
此外,您还可以根据需要设置padding
和margin
。
.elem div{
background-color: #ccc;
display: inline-block;
margin: 5px 3px;
padding: 5px 10px;
text-align: center;
}