如何在HTML和CSS中使用标签和文本框创建多个可调整大小的列 [英] How create multiple resizable columns with label and textbox in html and css
问题描述
我一直试图创建4个可调整大小的列(div或span)，每个列包含一个标签和一个文本框.文本框将填充可调整大小的列的宽度.标签的宽度固定.
I've been trying to create 4 columns (div or span) that are resizable and each hold a label and a textbox. the textbox fills the width of the resizable column. the label has a fixed width.
我从只有一列的布局开始，然后只复制了3次.那有点太乐观了. div或span彼此之间才出现.我使用了显示样式，但似乎无法完成.
I started on a layout with one column and then just copied it 3 times. that was a little too optimistic. the divs or spans just show up under each other. I played with the display styles but i can't seem to get it done.
第1列的布局类似于以下示例: http://jsfiddle.net/QaWMN/2/
the 1 column layout works like this example: http://jsfiddle.net/QaWMN/2/
<td class="content">
<div class="col1">
<div><label class="fieldname">Field 1</label><span class="fieldcontrol"><input type="text" id="Text1" /></span></div>
</div>
...
.content .fieldname
{
float: left;
width: 140px;
}
.content .fieldcontrol
{
display: block;
overflow: hidden;
}
.content input[type="text"]
{
width: 100%;
}
有人拉过吗?
感谢！
推荐答案
1)计算列的宽度
首先，您必须将宽度应用于每一列.
1) Calculating the width of columns
First of all you'll have to apply width to every column.
如果各列之间不存在装订线，则数学运算很简单.每列的宽度应等于100％除以列数.例如如果您有5列，则宽度应为100％/5 = 20％.
If you don't have gutters between columns, the math is easy. The width of each column should be equal to 100% divided by the number of columns. E. g. if you have 5 columns, the width should be 100%/5 = 20%.
如果想要装订线，则必须做一些更复杂的数学运算.问题是装订线的数量比列数少一.因此，您必须求解方程:
If you want gutters, you'll have to do some more complicated math. The matter is that the number of gutters is one less than the number of columns. So you have to solve the equation:
K*X + (K-1)*Y = 100%
其中K是列数，X是每列的宽度，Y是每个装订线的宽度.
Where K is the number of columns, X is the width of each column and Y is the width of each gutter.
比方说，列数将为4，装订线应为列的1/4.现在我们有了一个方程组:
Let's say the number of columns will be 4 and a gutter should be 1/4 of a column. Now we have a system of equations:
/ K*X + (K-1)*Y = 100%
< K = 4
\ Y = 1/4 * X
现在我们用K和Y代替:
Now we substitute K and Y and have:
4X + (4-1) * 1/4 * X = 100%
这可以简化为:
4X + 3/4 * X = 100%
4.75X = 100%
X = 21.0526%
现在，当我们知道X的值时，就可以计算Y:
Now when we know the value of X, we can calculate Y:
/ X = 21.0526%
\ Y = 1/4 * X
Y = 21.0526% / 4
Y = 5.26315%
是的！现在我们可以将其放入CSS:
Yay! Now we can put this into CSS:
.column {
width: 21.0526%;
margin-right: 5.26315%; }
.column:last-child {
margin-right: 0; }
2)水平对齐列
我们具有列和装订线的宽度，但它们仍显示在垂直堆栈中.我们在水平行中需要它们.
2) Aligning the columns horizontally
We have widths for columns and gutters, but they still appear in a vertical stack. We need them in a horizontal row.
有多种方法可以让您使用CSS构建列.
There are different approaches that let you build columns with CSS.
已经提到的一种是使用inline-block显示样式.这会将您的列放在一行中.除非您为列提供宽度，否则列将缩小以匹配其内容的宽度.
The one already mentioned is using the inline-block display style. This puts your columns into a single line. Unless you provide the width for columns, columns will shrink to match the width of their content.
在列标记之间不要有空格，这一点非常重要.正确:</div><div class="column">，错误:</div> <div class="column">.
It is very important not to have spaces between column tags. Correct: </div><div class="column">, incorrect: </div> <div class="column">.
HTML示例:
<div class=column>
Foo
</div><div class=column>
Foo
</div><div class=column>
Foo
</div><div class=column>
Foo
</div>
示例CSS:
/* Spanning the columns */
.column {
display: inline-block;
width: 21.0526%;
margin-right: 5.26315%; }
/* Removing the margin from the last column */
.column:last-child {
margin-right: 0; }
演示: http://jsbin.com/aqedum/2/edit
float方法不需要从HTML中删除空格:
The float method does not require removing spaces from HTML:
<div class=column>
Foo
</div>
<div class=column>
Foo
</div>
<div class=column>
Foo
</div>
<div class=column>
Foo
</div>
要使列在水平行中对齐，请对它们应用float: left;.
For the columns to align in a horizontal row, you apply float: left; to them.
浏览器不太擅长将分数百分比值四舍五入为绝对值，因此每列的位置可能会偏离1px.浮动方法可让您通过将最后一列向右浮动来使舍入错误不那么明显.
Browsers aren't very good at rounding fractional percentage values into absolute values, so the positioning of each column may be 1px off. Float method allows you to make the rounding error less noticeable by floating the last column to the right.
/* Spanning the columns */
.column {
float: left;
width: 21.0526%;
margin-right: 5.26315%; }
/* Removing the margin from the last column */
.column:last-child {
float: right;
margin-right: 0; }
演示: http://jsbin.com/idekux/2/edit
SASS 是一种允许您使用变量和其他方便的编程工具来构建CSS的语言.还有一个指南针工具，该工具包含一个非常强大的SASS扩展社区，可让您解决各种任务而无需重新发明每次都滚.
SASS is a language that lets you use variables and other handy programming stuff to build your CSS. There's also Compass tool that sustains an community of great extensions to SASS that let you solve various tasks without reinventing the wheel each time.
有许多基于SASS的SASS网格系统可自动构建网格.我最喜欢的网格系统是奇点.
There are a number of SASS grid systems based on SASS that automate building grids. My favorite grid system is Singularity.
使用奇异性，您只需提供列数和相对于列的装订线宽度即可得到结果！
With Singularity, you just provide the number of columns and the width of a gutter relative to a column and have the result!
$grids: 4;
$gutters: 0.25;
.column {
@include float-span(1);
&:last-child {
@include float-span(1, omega); }}
这将产生类似于前面示例的CSS.
This would produce CSS similar to the previous example.
奇异性还允许创建非对称网格和/或响应网格，其中列数和列内元素的对齐方式会根据不同的屏幕宽度而变化.
Singularity also allows creating asymmetric grids and/or responsive grids, where the number of columns and the alignment of the elements inside the columsn varies based on different screen width.
它还允许使用另一种称为隔离"的网格方法，该方法可以进一步减少浏览器舍入错误.
It also allows using another grid method called Isolation that further reduces browser rounding errors.
这篇关于如何在HTML和CSS中使用标签和文本框创建多个可调整大小的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
