骷髅CSS - 响应形式

Question

我有一个使用骨架css实现的表单。我使用的是三列（即三分之一列）布局，但由于列内容各自的长度，这导致了大量的空白区域。我更喜欢类似于以下的水平布局：

Textbox1 Textbox2 Textbox3

Textbox4 Textbox5 Textbox6

然后崩溃为移动设备：

Textbox1的

TextBox2中

Textbox3

Textbox4

Textbox5

Textbox6

到目前为止，我认为我能做到这一点的唯一方法是将每个文本框包装在自己的“三分之一”列中。有没有更简洁的方法呢？

由于

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/可能会有帮助。