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

【问题标题】：Variable padding to justify Elements可变填充以证明元素的合理性
【发布时间】：2015-07-23 06:47:30
【问题描述】：

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

【问题讨论】：

你为什么不用桌面显示（display: table）？
因为当我将table 用于容器和inside-block 用于儿童时，我没有得到合理的效果。与table 和table-cell 一起，孩子们都在一条线上。
您可以将table-cell 元素包装在table-row 元素中。

标签： html css html-table padding justify

【解决方案1】：

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

【讨论】：

谢谢。 flex 做到了：JSFIDDLE。不错的功能。以前没见过。

【解决方案2】：

当你使用display:inline-block;时，删除HTML结构中每个div之间的空格，这样就不会占用变量空间。

<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

【讨论】：