html创建多个标签,如何创建HTML和CSS与标签和文本框多个可调整大小的列(How create multiple r...

1)计算的列的宽度

首先，你必须申请宽度每一列。

如果你没有列之间的排水沟，数学是很容易。 每个列的宽度应等于100％的列数除以。 E.克。 如果有5列，宽度应该是100％/ 5 = 20％。

如果你想水槽，你就必须做一些更复杂的数学运算。 此事是水槽的数量比列数少一个。 所以，你必须解方程：

K*X + (K-1)*Y = 100%

其中K是列的数目，X是每个列的宽度和Y是每个槽的宽度。

比方说，列数为4和排水沟应该是一个列的1/4。 现在我们有一个方程组：

/ K*X + (K-1)*Y = 100%

< K = 4

\ Y = 1/4 * X

现在我们代替K和Y和有：

4X + (4-1) * 1/4 * X = 100%

这可以简化为：

4X + 3/4 * X = 100%

4.75X = 100%

X = 21.0526%

现在，当我们知道X的值，我们可以计算出Y：

/ X = 21.0526%

\ Y = 1/4 * X

Y = 21.0526% / 4

Y = 5.26315%

好极了！ 现在，我们可以把这个变成CSS：

.column {

width: 21.0526%;

margin-right: 5.26315%; }

.column:last-child {

margin-right: 0; }

2)水平地对齐的列

我们对列和排水沟宽度，但他们仍然会出现在垂直堆叠。 我们需要他们在一个水平行。

有迹象表明，让你建立柱的CSS不同的方法。

一)内联块

已经提到的一个是使用inline-block的显示风格。 这使你的列成一行。 除非您为列提供了宽度，列将缩小到与其内容相匹配的宽度。

不要有列标签之间的空间是非常重要的。 正确的：