我正在寻找一种在每组计算机上添加标题div
的方法。见下图。
.group {
display: inline;
border-width: 1px;
border-style: solid;
border-color: #008040;
padding: 35px 0px;
margin-bottom: 15px;
line-height: 75px;
}
.machine {
display: inline-block;
border-color: red;
height: 75px;
width: 50px;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
text-align: center;
margin: 0 3px 25px;
}
<div id="group1" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
<div id="group2" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
<div id="group3" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
预期结果:
答案 0 :(得分:0)
使用伪元素before
尝试以下内容:
.group {
display: inline-block;
border-width: 1px;
border-style: solid;
border-color: #008040;
margin-bottom: 15px;
position: relative;
padding-top: 50px;
}
.group::before {
content: attr(data-header);
width: calc(100% - 6px);
position: absolute;
top: 7%;
left: 50%;
transform: translateX(-50%);
text-align: center;
background-color: rgb(38, 38, 255);
color: white;
line-height: 2;
}
.machine {
display: inline-block;
border-color: red;
height: 75px;
width: 50px;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
position: relative;
margin: 0 3px;
}
.machine span {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
&#13;
<div id="group1" data-header="group1" class="group">
<div id="subDiv1" class="machine"><span>1</span></div>
<div id="subDiv2" class="machine"><span>2</span></div>
<div id="subDiv3" class="machine"><span>3</span></div>
<div id="subDiv4" class="machine"><span>4</span></div>
</div>
<div id="group2" data-header="group2" class="group">
<div id="subDiv1" class="machine"><span>1</span></div>
<div id="subDiv2" class="machine"><span>2</span></div>
<div id="subDiv3" class="machine"><span>3</span></div>
<div id="subDiv4" class="machine"><span>4</span></div>
</div>
<div id="group3" data-header="group3" class="group">
<div id="subDiv1" class="machine"><span>1</span></div>
<div id="subDiv2" class="machine"><span>2</span></div>
<div id="subDiv3" class="machine"><span>3</span></div>
<div id="subDiv4" class="machine"><span>4</span></div>
</div>
&#13;