CSS两列在小屏幕上转为一列

Question

我刚刚开始拒绝做所有的事情并且正在玩div和浮动。

我的主页需要顶部有两列，下面有一列。

当用户将小屏幕作为移动设备时，需要将每行的每个方框作为示例。

这样做的正确方法是什么？ 这会显示代码：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;
}