<style>
.a{
width:500px;
height:500px;
background:yellow;
border: 3px dashed black;
}
.b{
width: inherit;
height: 100px;
background: red;
vertical-align: middle;
display: table-cell;
text-align: center;
font-size: -webkit-xxx-large;
}
.c:nth-child(odd){
background: orange;
font-size: xx-large;
}
.c:nth-child(even){
background: grey;
font-size: xx-large;
}
</style>
<div class='a'>
<div class='b'>
Alert
</div>
<div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
</div>
</div>
大家好, 我有一个案例想要在主类(类“a”)之外显示警报部门。 现在 Alert 出现在类名为“a”的 div 中。 一些我想让警报出现在类名“a”之前的部分,而不使用顶部、底部等位置属性。 当警报出现时,它的宽度应该是带有类名“a”的 div 的宽度 只需要使用 CSS 完成。请帮忙 图一是这段代码的渲染结果 图二是我要渲染的
最佳答案
试试这个
.a{
width:500px;
height:500px;
background:yellow;
border: 3px dashed black;
}
.b{
width: inherit;
height: 100px;
line-height: 100px;
background: red;
vertical-align: middle;
text-align: center;
font-size: -webkit-xxx-large;
border-left: 3px solid white;
margin: -3px -3px 0px;
border-bottom: 3px dashed black;
border-right: 3px solid white;
border-top: 3px solid white;
}
.c:nth-child(odd){
background: orange;
font-size: xx-large;
}
.c:nth-child(even){
background: grey;
font-size: xx-large;
}
<div class='a'>
<div class='b'>
Alert
</div>
<div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
<div class=c>Hiiiiiiiiiiiiiiiiiii</div>
</div>
</div>
注意:这并没有真正将 Alert 部分放在主类之外。我只是调整边距和边框(检查 CSS)以使其看起来像是在主类之外。我仍然建议最好只在 HTML 中进行调整,或者使用 CSS 属性 position
,但根据您的要求,您可以:P
关于HTML block 放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47389210/