时间戳

首页 > 解决方案 > 元素的边框折叠问题（不是表格）

css - 元素的边框折叠问题（不是表格）

问题描述

我一直在尝试获取要合并的元素的边框...我认为边框折叠将是解决此问题的直接解决方案...但显然不是，或者我在滥用它。

这是我的代码...

索引.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>

样式.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 边框的外观。感谢您的帮助...我查看了一些线程，但没有找到答案。再次感谢！

标签： csslayoutborder-collapse

解决方案

此代码段适用于问题中给出的特定情况（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(6), .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）像素.

推荐阅读