Блог

Главная - Вопросы по программированию - Макет флажков с двумя столбцами с использованием только css

Макет флажков с двумя столбцами с использованием только css

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Следующий код является динамически сгенерированной частью формы, и я могу стилизовать его только с помощью css.

Никаких изменений в html, кроме имен классов, за исключением: классов «element» и «FormField», поскольку они используются как общие классы для других элементов в форме.

Макет, который я ищу, представляет собой флажок с двумя столбцами. Как вы можете видеть в коде, у меня есть 4 элемента с метками-флажками. Мне нужны элементы 0 и 1 в столбце, а в другом столбце рядом с ним — элементы 2 и 3.

Я знаю, что таблицы должны исчезнуть навсегда, я согласен, но, пожалуйста, помогите мне здесь, я собираюсь снова создать весь сайт, но у меня пока нет времени. 

 <div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat0">Category 0</label></div></td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat1">Category 1</label></div></td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat2">Category 2</label></div></td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat3">Category 3</label></div></td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

Комментарии:

1. annnnnnnd ваш css?

2. У вас много таблиц со встроенными стилями. Переходим к старой школе

3. Удалите теги JavaScript и jQuery, если вам нужно решение только для CSS. Кроме того, вы не можете иметь более одного одинакового идентификатора, назначенного разным элементам . Так что переименуйте эти 3 id="myCat" в myCat1 , myCat2 , .etc..

4. Вы также должны связать элементы label, чтобы связать текстовые метки с элементами управления формой (tl; dr см. Примеры) через label[for] и id s в элементах поля формы (большинство входных данных, выбор, текстовое поле)

Ответ №1:

Вы можете использовать CSS float и clear для этого. Вот пример.

 .element{
  float:right;
}

.element:nth-child(odd){
  clear:right;
}  
 <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat0">Category 0</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat0" style="float:left">
                                <input type="checkbox" name="eCat0" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat1">Category 1</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat1" style="float:left">
                                <input type="checkbox" name="eCat1" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat2">Category 2</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat2" style="float:left">
                                <input type="checkbox" name="eCat2" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat3">Category 3</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat3" style="float:left">
                                <input type="checkbox" name="eCat3" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

Ответ №2:

Если вы можете стилизовать родительский элемент этих четырех разделов, вы можете установить

 .parent {
    columns: 2;
}

Это будет работать в IE10 . https://jsfiddle.net/c979dxLe/1 /

Вы также можете установить ширину столбцов. Документы: https://developer.mozilla.org/nl/docs/Web/CSS/columns

Ответ №3:

Я сделал это для некоторых md-флажков в моем родительском div, и они упорядочены по столбцам! Вот так:

 1                                              4
2                                              5
3

CSS:

 .parent {
    columns: 2;
}
.parent > * {
    width: 100%;
}