0

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

我从一列的布局开始，然后复制了 3 次。这有点过于乐观了。div 或 span 只是显示在彼此下方。我玩过显示样式，但似乎无法完成。

1 列布局的工作方式类似于以下示例：http: //jsfiddle.net/QaWMN/2/

.content .fieldname
{
    float: left;
    width: 140px;
}
.content .fieldcontrol
{
    display: block;
    overflow: hidden;
}
.content input[type="text"]
{
    width: 100%;
}    
<div class="content">
    <div class="col1">
        <div><label class="fieldname">Field 1</label><span class="fieldcontrol"><input type="text" id="Text1" /></span></div>
    </div>
</div>

我怎样才能做到这一点？

4

2 回答 2

0

1) 计算列宽

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

如果列之间没有排水沟，那么数学很容易。每列的宽度应等于 100% 除以列数。例如。如果您有 5 列，则宽度应为 100%/5 = 20%。

如果你想要排水沟，你将不得不做一些更复杂的数学。问题是排水沟的数量比列的数量少一。所以你必须解方程：

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

其中 K 是列数，X 是每列的宽度，Y 是每个装订线的宽度。

假设列数为 4，而 gutter 应为列的 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。浮动方法允许您通过将最后一列向右浮动来使舍入误差不那么明显。

/* 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。

Singularity 还允许创建不对称网格和/或响应式网格，其中列数和列内元素的对齐方式根据不同的屏幕宽度而变化。

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

于 2013-04-22T08:20:28.233 回答
0

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

这里： http: //jsfiddle.net/QaWMN/35/ 宽度较小，可能是因为您的填充。

编辑：您可以替换display : inline-block为float : left -> http://jsfiddle.net/QaWMN/36/

于 2013-04-22T07:20:47.127 回答