gpt4 book ai didi

html - CSS 中的部分边框

转载 作者:技术小花猫 更新时间:2023-10-29 11:47:59 27 4
gpt4 key购买 nike

我有两个带边框的 div,如下图所示。

enter image description here

如何只删除如下图所示 2 个 div 接触的边框?

enter image description here

这是上图使用的 html 和 css (js fiddle: http://jsfiddle.net/paulyoder/whsC4/19/ )

<html>
<head>
<style type="text/css">
#sideBar {
float: left;
width: 75px;
height: 50px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black
}

#balanceSheetSummary {
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
}

body { padding: 10px; }
h2 { margin: 5px; }
</style>
</head>
<body>
<div id="sideBar">
<h2>Side Bar</h2>
</div>
<div id="balanceSheetSummary">
<h2>Content</h2>
</div>
</body>
</html>

最佳答案

你可以这样做:http://jsfiddle.net/sj2AD/1/

#sideBar {
float: left;
width: 75px;
height: 50px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
background: red;
position: relative;
z-index: 2;
}

#balanceSheetSummary {
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
background: red;
position: relative;
z-index: 1;
margin-left: -1px;
}

body {
padding: 10px;
}
h2 {
margin: 5px;
}

我所做的是在右侧添加负边距,以便框重叠。

这确实会中断,例如,如果左侧 div 高于右侧。

关于html - CSS 中的部分边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8358134/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com