Скелет CSS - отзывчивая форма

Question

У меня есть форма, использующая скелет css. Я использовал раскладку из трех столбцов (т. Е. Одну треть столбцов), но это привело к большому количеству пробелов из-за соответствующей длины содержимого столбцов. Я предпочел бы горизонтальное расположение, подобное следующему:

Textbox1 TextBox2 Textbox3

Textbox4 Textbox5 Textbox6

Который затем падает на мобильный, как так:

Textbox1

Textbox2

Textbox3

Textbox4

Textbox5

Textbox6

Единственный способ, который я думал, что я могу сделать это до сих пор, чтобы обернуть каждое текстовое поле в своем собственном e-third '. Есть ли более чистый способ сделать это?

Благодаря

Answer 1

Установить класс для ваших текстовых полей (или input[type="text"]) и CSS:

Для рабочего стола:

.yourclass { 
    width: 33%; 
    float: left; 
} 

Для мобильного:

@media only screen and (max-device-width: 480px) { 
    .yourclass { 
     width: 100%; 
     float: left; 
    } 
} 

Это: http://mislav.uniqpath.com/2010/04/targeted-css/ может быть полезным.