我有一个包含以下代码的简单页面:
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中运行?
答案 0 :(得分:0)
我正在使用Chrome,它似乎工作正常。但是我将探索使用display: grid
来帮助您在另一个元素内部堆叠和移动不同的元素。
并非所有浏览器(https://caniuse.com/#search=grid)都完全受100%支持,但它在Chrome浏览器中有效,删除所有::after
和::before
的使用非常有帮助。 / p>
在此处了解更多信息: https://www.w3schools.com/css/css_grid.asp
修改:
您不能再缩小Chrome的大小,因为这是Chrome应用允许缩小的限制。如果您希望看到一个较小的窗口,请启用“开发人员工具”(按12),然后尝试缩小浏览器。
此外,您的CSS样式可能会缓存在浏览器中。按SHIFT
+ F5
刷新页面购买。