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的显示风格。 这使你的列成一行。 除非您为列提供了宽度,列将缩小到与其内容相匹配的宽度。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值