Question

我想在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;
}

Answer 1

您可以尝试display: flex。你可以用它做一些很酷的东西。这是一个有用的链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

当您使用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>

检查Fiddle Here.

此外，您还可以根据需要设置padding和margin。

.elem div{
    background-color: #ccc;
    display: inline-block;
    margin: 5px 3px;
    padding: 5px 10px;
    text-align: center;
}

检查Updated Fiddle Here

可变填充以证明元素的合理性

2 个答案: