纯CSS形式与列的样式？

Question

我有一个表单，我需要设置为2列，4列和6列。我分别命名了我的类col2，col4和col6。我遇到了很多麻烦，特别是垂直对齐和列本身。任何人都可以帮忙吗？

<div id="fieldset1" class="col2">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" type="text" id="SingleForm122" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" type="text" id="SingleForm123" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" type="text" id="SingleForm124" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" type="text" id="SingleForm125" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" type="text" id="SingleForm126" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" type="text" id="SingleForm127" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" type="text" id="SingleForm128" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" type="text" id="SingleForm129" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" type="text" id="SingleForm130" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" type="text" id="SingleForm131" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" type="text" id="SingleForm132" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" type="text" id="SingleForm133" class="inputText" />
            </div>
        </div>
    </fieldset>
</div>
<div style="clear: both;">
</div>
<div id="fieldset2" class="col4">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" type="text" id="Text1" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" type="text" id="Text2" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" type="text" id="Text3" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" type="text" id="Text4" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" type="text" id="Text5" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" type="text" id="Text6" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" type="text" id="Text7" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" type="text" id="Text8" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" type="text" id="Text9" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" type="text" id="Text10" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" type="text" id="Text11" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" type="text" id="Text12" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" type="text" id="Text13" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" type="text" id="Text14" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" type="text" id="Text15" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" type="text" id="Text16" class="inputText" />
            </div>
        </div>
    </fieldset>
</div>
<div style="clear: both;">
</div>
<div id="fieldset3" class="col6">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" type="text" id="Text25" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" type="text" id="Text26" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" type="text" id="Text27" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" type="text" id="Text28" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" type="text" id="Text29" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" type="text" id="Text30" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" type="text" id="Text31" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" type="text" id="Text32" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" type="text" id="Text33" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" type="text" id="Text34" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" type="text" id="Text35" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" type="text" id="Text36" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" type="text" id="Text37" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" type="text" id="Text38" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" type="text" id="Text39" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" type="text" id="Text40" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm138">Music Cabinet</label>
                <input name="SingleForm138" type="text" id="Text41" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm139">Rug, Large Roll</label>
                <input name="SingleForm139" type="text" id="Text42" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm140">Rug, Small Roll</label>
                <input name="SingleForm140" type="text" id="Text43" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm141">Sofa, 2 Cushions</label>
                <input name="SingleForm141" type="text" id="Text44" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm142">Sofa, 3 Cushions</label>
                <input name="SingleForm142" type="text" id="Text45" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm143">Sofa, 4 Cushions</label>
                <input name="SingleForm143" type="text" id="Text46" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm144">Sofa, Sectional</label>
                <input name="SingleForm144" type="text" id="Text47" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm145">Table, Coffee, End or Night</label>
                <input name="SingleForm145" type="text" id="Text48" class="inputText" />
            </div>
        </div>
    </fieldset>
</div>
<div style="clear: both;">
</div>

Answer 1

为什么不只使用表格？你把所有东西都放在了桌子上（rowContainer = tr，rowItem = td）。您需要做的就是将div标签更改为table，tr和td标签。

表格不是邪恶的，如果你想以表格方式显示东西，那就不是了。如果表格是按照您想要的方式对齐事物的最简单方法，那么请使用表格。

Answer 2

我也有类似的问题。我最终使用Blueprint CSS（或者960.gs），这极大地简化了基于列的布局的创建。

Answer 3

我个人使用桌子几乎所有形式，无论大小。格式化起来要容易得多，而且你可以减少代码的数量。

我建议您使用表格并解决问题。

Answer 4

不确定我理解你所追求的是什么，但是如果你正在使用带有对齐边框的三列布局，特别是底部边框，并且你有一个不平衡的内容，你可以将你的列包装在一个div（colWrapper）中，摆脱双方的div清除，并删除应用于您的fieldsets的边框。通过对包装器应用溢出：隐藏，然后以一种方式强制使用长边距（-3000px），并对列进行长填充（3000px），然后可以将边框应用于列并获得所需的效果。它也被称为“圣杯”。

.col2,.col4,.col6{float:left;}
div > fieldset{border:none;}
#colWrapper{overflow:hidden;border-bottom:1px solid black;}
#colWrapper > div {border:1px solid; margin-bottom:-3000px;padding-bottom:3000px;}
.col2,.col4{border-right:none;}

您的HTML就像：

<div id="colWrapper"><div id="fieldset1" class="col2">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" id="SingleForm122" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" id="SingleForm123" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" id="SingleForm124" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" id="SingleForm125" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" id="SingleForm126" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" id="SingleForm127" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" id="SingleForm128" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" id="SingleForm129" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" id="SingleForm130" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" id="SingleForm131" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" id="SingleForm132" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" id="SingleForm133" class="inputText" type="text">
            </div>
        </div>
    </fieldset>
</div>

<div id="fieldset2" class="col4">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" id="Text1" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" id="Text2" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" id="Text3" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" id="Text4" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" id="Text5" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" id="Text6" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" id="Text7" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" id="Text8" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" id="Text9" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" id="Text10" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" id="Text11" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" id="Text12" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" id="Text13" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" id="Text14" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" id="Text15" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" id="Text16" class="inputText" type="text">
            </div>
        </div>
    </fieldset>
</div>

<div id="fieldset3" class="col6">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" id="Text25" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" id="Text26" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" id="Text27" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" id="Text28" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" id="Text29" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" id="Text30" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" id="Text31" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" id="Text32" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" id="Text33" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" id="Text34" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" id="Text35" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" id="Text36" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" id="Text37" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" id="Text38" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" id="Text39" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" id="Text40" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm138">Music Cabinet</label>
                <input name="SingleForm138" id="Text41" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm139">Rug, Large Roll</label>
                <input name="SingleForm139" id="Text42" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm140">Rug, Small Roll</label>
                <input name="SingleForm140" id="Text43" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm141">Sofa, 2 Cushions</label>
                <input name="SingleForm141" id="Text44" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm142">Sofa, 3 Cushions</label>
                <input name="SingleForm142" id="Text45" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm143">Sofa, 4 Cushions</label>
                <input name="SingleForm143" id="Text46" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm144">Sofa, Sectional</label>
                <input name="SingleForm144" id="Text47" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm145">Table, Coffee, End or Night</label>
                <input name="SingleForm145" id="Text48" class="inputText" type="text">
            </div>
        </div>
    </fieldset>
</div>
</div>

编辑：

我认为我最好不要忘记你的问题，而且这比我最初认为的要简单得多

试试这些css：

<style charset="utf-8" type="text/css">

.rowItem{float:left;}
.col2 .rowItem{width:49.9%;}
.col4 .rowItem{width:24.9%;}
.col6 .rowItem{width:16.66%;}
.rowItem label {font-size:8px;text-align:right;}
.rowItem label, .rowItem input{float:left;display:block;width:49.9%;margin-bottom:12px;}
</style>