我想要做的是拥有一个响应式的 3 列设计。如果该站点是在手机上查看的，则这些列应该一个一个地折叠起来。我下面的内容可以做到这一点，但是我似乎无法解决的问题是垂直边框。
如果在普通台式电脑上查看网站，应该有 3 列和两个垂直边框，高度为 100%。现在发生的情况是，当我缩小浏览器时，框会按预期折叠，但边框不会掉到地板上。
如果屏幕足够宽，只能容纳两列，则其中一个框应该折叠在下方，并且应该只有一个垂直边框。如果屏幕的宽度只够容纳一列，那么其他两个框应该折叠在第一个框的下面，并且在那个位置根本没有边框。
我想要完成的是显示带有边框的数据(如果宽度允许)，这样它看起来就不会像所有的东西一起运行。
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
}
#wrapper {
width:100%;
height:100%;
float:left;
}
#wrapper div {
width:33%;
height:100%;
min-width:300px;
display:inline-block;
}
#wrapper div:nth-child(1) {
border-right:1px solid #000;
}
#wrapper div:nth-child(2) {
border-right:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
最佳答案
您可以使用 css 媒体查询来处理常见的场景，例如
// initially all divs will have right boarder by default
@media(width:768px){ // assume that at 768px you'll have 2 divs inline
#wrapper div:nth-child(2) {
border-right:0px;
}
#wrapper div:nth-child(3) {
border-right:0px;
}
}
@media(width:512px){ // assume that at 512px you'll have all 3 divs vertical
#wrapper div {
border-right:0px;
border-bottom: 1px solid #000;
}
}
等等
关于html - 如何为响应式设计设置 3 列 100% 的垂直边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22373230/