HTML块放置

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部门。 现在，警报出现在div中，类名为“a”。 一些我想如何使警报来到分区机智的类名'a'而不使用像top，bottom等位置属性。 当警报出来时，它的宽度应该是div的宽度，类名为'a' 只需使用CSS即可完成。请帮忙 图一是从这段代码渲染的内容 图2是我要呈现的内容

Answer 1

试试这个

＆＃13;

＆＃13;

    .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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

注意：这并没有将Alert部门放在主类之外。我只是调整边距和边框（检查CSS），使它看起来像是在主类之外。我仍然建议最好只使用HTML调整或使用CSS属性position进行调整，但根据您的要求，您可以去：P