HTML block 放置

Question

<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 完成。请帮忙图一是这段代码的渲染结果图二是我要渲染的

Answer 1

试试这个

    .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