问题描述
我一直试图在要合并的元素上设置边框......我认为边框折叠将是一个简单的解决方案......但显然不是,或者我正在滥用它。
这是我的代码...
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel=stylesheet">
<link href="style.css" rel="stylesheet">
<title>Responsive Grid</title>
</head>
<body>
<div class="container">
<nav>Navbar</nav>
<main>Main</main>
<div id="sidebar">Sidebar</div>
<div id="content1">Content1</div>
<div id="content2">Content2</div>
<div id="content3">Content3</div>
<footer>Footer</footer>
</div>
</body>
</html>
style.css:
body {
box-sizing: border-box;
}
.container > * {
border:green 1px solid;
border-collapse:collapse;
}
.container {
display:grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
我仍然看到元素相遇的 2px 边框的外观。 感谢您的帮助...我环顾四周,但我没有找到答案。再次感谢!
解决方法
此代码段适用于问题中给出的特定情况(4 列网格中的 7 个元素),方法是使用(简单)方法使各种边框透明,因此不会加倍:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel=stylesheet">
<link href="style.css" rel="stylesheet">
<style>
body {
box-sizing: border-box;
}
.container > * {
border:green 1px solid;
position: relative;
overflow: visible;
}
.container > *:nth-child(2),.container > *:nth-child(3),.container > *:nth-child(4),.container > *:nth-child(6),.container > *:nth-child(7) {
border-left-color: transparent;
}
.container > *:nth-child(5),.container > *:nth-child(7) {
border-top-color: transparent;
}
.container {
display:grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
</style>
<title>Responsive Grid</title>
</head>
<body>
<div class="container">
<nav>Navbar</nav>
<main>Main</main>
<div id="sidebar">Sidebar</div>
<div id="content1">Content1</div>
<div id="content2">Content2</div>
<div id="content3">Content3</div>
<footer>Footer</footer>
</div>
</body>
</html>
更复杂的尝试可以在一般情况下工作 - 例如,伪元素覆盖先前同级元素的边框 - 仅在理论上有效,因为单个像素的放置在不同的显示器上可能会有所不同,因此结果可能是半个 (CSS) 像素例如。