【发布时间】：2018-04-19 04:29:32
【问题描述】：
考虑下面的小提琴，
https://jsfiddle.net/r5ttk64r/2/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="../css/tabs.css">
</head>
<body>
<div id="page-left">
<h1>Hello World 1</h1>
</div>
<div id="page-right">
<h1>Hello World 2</h1>
<div id="tabsdiv">
<div id="description" class="tab active"><span>DESCRIPTION</span></div>
<div id="specification" class="tab"><span>SPECIFICATION</span></div>
<div id="prodfamily" class="tab"><span>PRODUCT FAMILY</span></div>
<div id="reviews" class="tab"><span>REVIEWS & ARTICLES</span></div>
<div id="showrooms" class="tab"><span>SHOWROOMS</span></div>
</div>
<div id="tabcontentsdiv">
<section id="specificationcontent" class="tabcontent active">
<div id="content-left" class="specscolumn" style="height:auto; display:block; background:blue;">
<div style="display:block;" class="innerspecscolumn-left">
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">LED</p>
</div>
</div>
<div id="content-right" class="specscolumn">
<div class="innerspecscolumn-left">
<p class="specname">CERTIFICATION</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">ETL</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>CSS
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: black;
/*background: #eee;*/
}
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
#page-left {
width: 35%;
float: left;
padding:40px;
}
#page-right {
width: 65%;
float: left;
padding:40px;
}
section {
display: none;
padding: 45px 10px 20px 10px;
border: 1px solid lightgray;
margin-top: -30px;
/*overflow: hidden;*/
}
#tabsdiv {
background: lightgray;
margin-right:10px;
margin-left: 10px;
height: 66px;
}
.tab {
width: 20%;
float:left;
text-align: center;
background:lightgray;
border-width: 1px 1px 1px 0;
border-color: grey;
border-style: solid;
line-height: 66px;
}
.tab:first-of-type {
border-left: 1px solid grey;
}
.tab:hover {
cursor: pointer;
}
.tab.active {
/*color: #555;*/
/*border: 1px solid #ddd;*/
/*border-top: 2px solid orange;*/
/*border-bottom: 1px solid #fff;*/
background:#99df5e;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label {
display: inline-block;
margin: 0;
padding: 25px 25px;
font-weight: 600;
text-align: center;
/*color: #bbb;*/
/*border: 1px solid transparent;*/
background: lightgray;
width:19.9%;
}
.tabcontent.active
{
display: block;
}
.specscolumn {
width: 50%;
float:left;
}
#content-left {
padding-right: 10px;
}
#content-right {
padding-left: 10px;
}
.innerspecscolumn-left {
width: 50%;
float:left;
}
.innerspecscolumn-right {
width: 50%;
float:right;
text-align: right;
}
.specname {
font-weight: bold;
}
@media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}
@media screen and (max-width: 400px) {
label {
padding: 15px;
}
}我一直在尝试使边框随着蓝色框的高度而扩展。
使 div 显示：块不起作用。 将部分设置为溢出：隐藏确实使边框扩展但将边框拉下。我需要那个margin-top:-30px，这样边框看起来就像是从标签中出来的，而不是从它下面开始的。
有什么想法吗？
【问题讨论】：
标签： css