我有一个简单的页面,其中包含以下代码:
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
来帮助你在另一个元素内堆叠和移动不同的元素。
它并非完全100%支持所有浏览器(https://caniuse.com/#search=grid),但它适用于Chrome,它非常有助于删除所有::after
和::before
的使用。
在这里探索更多:https://www.w3schools.com/css/css_grid.asp
编辑: 您无法更多地缩小Chrome,因为这是Chrome应用允许缩小的限制。如果您想查看较小的视频,请启用开发人员工具(按12),然后尝试缩小浏览器。
此外,您的CSS样式可能会缓存在您的浏览器中。刷新页面购买按SHIFT
+ F5
。