css - 如何布局按钮以堆叠在移动设备上?
问题描述
我有一个包含以下代码的简单页面:
body {
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
background: #eaeaed;
*zoom: 1;
}
.container,
section,
aside {
border-radius: 6px;
}
section,
aside {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-align: center;
}
@media all and (min-width: 420px) {
.container {
max-width: 538px;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Responsive</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<section>Section</section>
<aside>Aside</aside>
</div>
</body>
</html>
这些按钮在更宽的屏幕上彼此相邻放置,但是当我缩小浏览器的宽度时,它们不会像本例中那样堆叠:
https://codepen.io/shayhowe/pen/KcApz
我使用相同的代码。
它在 Chrome 中不起作用,但在 Firefox 中起作用。
它在 Chrome 中如下所示:
而且我无法进一步缩小它。
如何让它在 Chrome 中工作?
解决方案
我正在使用 Chrome,它似乎工作正常。但我会探索使用display: grid
来帮助您在另一个元素中堆叠和移动不同的元素。
它并非在所有浏览器 ( https://caniuse.com/#search=grid )中都完全 100% 支持,但它在 Chrome 中有效,删除所有使用::after
and非常有帮助::before
。
在这里探索更多: https ://www.w3schools.com/css/css_grid.asp
编辑:
您不能进一步缩小 Chrome,因为这是 Chrome 应用程序允许缩小到的限制。如果你想看到一个更小的 veiwport,启用开发者工具(按 12),然后尝试缩小你的浏览器。
此外,您的 css 样式可能会缓存在您的浏览器中。SHIFT
按+刷新购买页面F5
。