纯CSS样式与列？

我有一个表格，我需要的样式有2,4和6列。我分别命名了我的类col2，col4和col6。特别是在垂直对齐和列本身方面，我遇到了很多麻烦。有人能帮忙吗？纯CSS样式与列？


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

来源

2010-02-20 TruMan1

钙你也发布当前的CSS？ – 2010-02-20 02:34:06

为什么不使用表？你已经把所有东西都放到了表格中（rowContainer = tr，rowItem = td）。您只需将div标签更改为table，tr和td标签即可。

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

来源

2010-02-20 02:35:29 Marius

表格不用于以表格形式显示内容。它们用于显示表格数据。 – 2010-02-20 05:28:06

说谁？互联网上的一些人？为什么创建一个与表格完全相同的DOM树比表更好？在网格中排列div最简单的方法是使用display：table，table-row和table-cell（http://www.w3.org/TR/CSS2/visuren.html#display-prop）。但是，创造已经存在的东西的意义何在？你的页面有很多div而不是很多表格有多好？谁在没有CSS的情况下查看你的页面，谁在乎如果没有CSS的页面中有表格？ – Marius 2010-02-20 05:47:27

因为语义上你的页面失去了意义。 – Gausie 2011-07-22 12:15:33

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

来源

2010-02-20 02:36:23 Zepplock

对于css框架+1 – miku 2010-02-20 02:48:36

我个人使用的表几乎所有形式，小型和大型。它的格式要简单得多，而且代码少得多。

我建议你使用表格和解决您的问题。

来源

2010-02-20 03:34:09 Tom

不知道我理解你以后，但如果你是后三列，对齐边框，尤其是底一个布局，和你有一个不平衡的内容，你可以用你的列在一个div（colWrapper ），摆脱双方的div清除，并删除应用到您的字段集的边框。通过向包装器应用overflow：hidden，然后以一种方式强制长边距（-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>

编辑：

我想我最好undertsand您的问题，它比我的想法最初

试试这些简单得多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>

来源

2010-02-20 05:23:38 jfbarrois

纯CSS样式与列？

回答

相关问题