How create multiple resizable columns with label and textbox in html and css

问题

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.

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.

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%;
}

Anyone ever pulled this off?

Thanx!

回答1:

1) Calculating the width of columns

First of all you'll have to apply width to every column.

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%

Where K is the number of columns, X is the width of each column and Y is the width of each gutter.

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

Now we substitute K and Y and have:

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

This can be reduced to:

4X + 3/4 * X = 100%
4.75X = 100%
X = 21.0526%

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%

Yay! Now we can put this into CSS:

.column {
  width: 21.0526%;
  margin-right: 5.26315%; }

  .column:last-child {
    margin-right: 0; }

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.

There are different approaches that let you build columns with CSS.

a) 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.

It is very important not to have spaces between column tags. Correct: </div><div class="column">, incorrect: </div> <div class="column">.

Example HTML:

<div class=column>
  Foo
</div><div class=column>
  Foo
</div><div class=column>
  Foo
</div><div class=column>
  Foo
</div>

Example 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; }

Demo: http://jsbin.com/aqedum/2/edit

b) Floats

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>

For the columns to align in a horizontal row, you apply float: left; to them.

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; }

Demo: http://jsbin.com/idekux/2/edit

Using SASS to automate width calculations

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.

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); }}

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.

回答2:

you need to put a combinaison of display : inline-block (so that they come next to each others) and a width : 25% (so they can fit all 4 in one line)

here : http://jsfiddle.net/QaWMN/35/ the width is smaller, because of your padding probably.

Edit : you can replace the display : inline-block by a float : left -> http://jsfiddle.net/QaWMN/36/

来源：https://stackoverflow.com/questions/16141030/how-create-multiple-resizable-columns-with-label-and-textbox-in-html-and-css

标签

css

html

multiple-columns