Question

我一直在努力创建4个可调整大小的列（div或span），每个列都有一个标签和一个文本框。文本框填充可调整大小的列的宽度。标签有固定的宽度。

我开始使用一列进行布局，然后将其复制3次。这有点过于乐观了。 div或spans只是出现在彼此之下。我玩过显示风格，但我似乎无法完成它。

1列布局的工作原理如下：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%;
}

有人拉过这个吗？

感谢名单！

Answer 1

你需要将display : inline-block组合在一起（以便它们彼此相邻）和width : 25%（因此它们可以将所有4个放在一行中）

此处：http://jsfiddle.net/QaWMN/35/ 宽度较小，因为你的填充可能。

编辑：您可以用display : inline-block替换float : left - ＆GT; http://jsfiddle.net/QaWMN/36/

Answer 2

1）计算列宽

首先，您必须将宽度应用于每一列。

如果列之间没有排水沟，则数学很容易。每列的宽度应等于100％除以列数。 E. g。如果你有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构建列。

a）内联块

已经提到的那个是使用inline-block显示样式。这会将您的列放在一行中。除非您提供列的宽度，否则列将缩小以匹配其内容的宽度。

在列标签之间不要有空格是非常重要的。正确：</div><div class="column">，不正确：</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

b）漂浮

float方法不需要从HTML中删除空格：

<div class=column>
  Foo
</div>

<div class=column>
  Foo
</div>

<div class=column>
  Foo
</div>

<div class=column>
  Foo
</div>

要使列在水平行中对齐，请将float: left;应用于它们。

浏览器不能很好地将小数百分比值舍入为绝对值，因此每列的定位可能会偏离1px。 Float方法允许您通过将最后一列向右浮动来使舍入误差不太明显。

/* 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自动进行宽度计算

SASS是一种语言，可以让您使用变量和其他方便的编程来构建CSS。还有Compass工具可以维持一个对SASS有很大扩展的社区，让你无需每次都重新发动轮子就可以解决各种任务。

有许多基于SASS的SASS网格系统可以自动构建网格。我最喜欢的网格系统是Singularity。

使用Singularity，您只需提供列数和相对于列的装订线宽度，并获得结果！

$grids: 4;
$gutters: 0.25;

.column {
    @include float-span(1);

    &:last-child {
        @include float-span(1, omega); }}

这将生成类似于前一个示例的CSS。

奇点还允许创建非对称网格和/或响应网格，其中列数和列内元素的对齐方式因屏幕宽度的不同而不同。

它还允许使用另一种称为隔离的网格方法，进一步减少浏览器舍入错误。

如何在html和css中创建带有标签和文本框的多个可调整大小的列

2 个答案:

1）计算列宽

2）水平对齐

a）内联块

b）漂浮

使用SASS自动进行宽度计算