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

Question

我想在 div 中创建对齐元素。它有效，但元素之间的 space 不同。我希望它看起来像 table。内部 divs 需要诸如可变填充之类的东西。

我不知道也无法计算元素的宽度，所以我无法调整样式或将它们放入 tables。

我创建了一个 jsfiddle。

TABLE

<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。你可以用它做一些很酷的事情。这是一个有用的 link：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

当你使用display:inline-block;时，在HTML结构中的每个div之间删除space 所以，它不会带变量space。

<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

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

Variable padding to justify Elements

html

css

html-table

padding

justify