css - CSS 两列在小屏幕上变成一列

Question

我刚开始不再做所有事情，而是在玩 div 和 floats。

我有一个主页，需要在顶部有两列，在下方有一个。

当用户有一个小屏幕作为手机时，它需要将每个盒子放在每一行上作为例子。

这样做的正确方法是什么？这显示了代码：http: //jsfiddle.net/boje/cMF4P/1/

这就是主页现在所做的。

部分代码

/* =====  form2  ===== */
fieldset.fieldsetLeft {
    width:47%;
    float:left;
    padding: 10px;
    margin-bottom: 15px;
}
fieldset.fieldsetRight {
    width: 45%;
    float:right;
    padding: 10px;
    margin-bottom: 15px;
}
.clearBoth {
    clear: both;
}

Answer 1

在您的代码中，您可以将右侧浮动更改为在右侧框中向左浮动，它将按预期工作。

http://jsfiddle.net/PzAsJ/

fieldset.fieldsetRight {
    width: 45%;
    float:left;
    padding: 10px;
    margin-bottom: 15px;
}

但是看看css3 媒体查询，它给了你更多的可能性。

Answer 2

对于智能手机和平板电脑，您可以制作一个专用的 css 文件，该文件将重载普通 css 样式表：

在您的标头 .html 中：

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="smart_tablet.css" type="text/css" />

然后进入 smart_tablet.css 重新定义具体的：

fieldset.fieldsetLeft {
    width:100%;
    float: none;
}
fieldset.fieldsetRight {
    width: 100%;
    float: none;
}