Чистая CSS форма стилей со столбцами? - PullRequest
Новая
       5

Чистая CSS форма стилей со столбцами?

1 голос
/ 20 февраля 2010

У меня есть форма, в которой мне нужно стилизовать 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>

Ответы [ 4 ]

5 голосов
/ 20 февраля 2010

Почему бы просто не использовать таблицы? Вы выложили все как таблицы (rowContainer = tr, rowItem = td). Все, что вам нужно сделать, это изменить теги div на теги table, tr и td.

Таблицы не являются злом, если вы не хотите отображать данные в табличной форме. Если таблицы - это самый простой способ выровнять вещи так, как вы хотите, используйте таблицы.

2 голосов
/ 20 февраля 2010

У меня тоже были похожие проблемы. В итоге я использовал Blueprint CSS (или 960.gs), который значительно упрощает создание макетов на основе столбцов.

1 голос
/ 20 февраля 2010

Не уверен, что я понимаю, что вам нужно, но если вам нужен макет из трех столбцов с выровненными границами, особенно с нижним, и у вас несбалансированный контент, вы можете обернуть ваши столбцы в div (colWrapper) , избавьтесь от очистки div с обеих сторон и удалите границу, примененную к вашим наборам полей. Применив переполнение: скрытое к оболочке, затем принудительно применяя длинное поле (-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>

EDIT:

Мне кажется, я лучше понимаю вашу проблему, и это намного проще, чем я думал изначально

Попробуйте эти 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>
1 голос
/ 20 февраля 2010

Я лично использую таблицы практически для всех форм, маленьких и больших. Это намного проще отформатировать, и вы получаете намного меньше кода.

Я рекомендую вам использовать таблицы и решать ваши проблемы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...