Question

总是坚持使用这个模板。知道如何使用表格，但需要在div上。角具有固定宽度（35x35 v和65x35 h），主容器具有自适应宽度。尝试浮动和内联块但没有成功。

阅读评论后，我尝试了z-index的红色正方形：top是好的，但底部方块有麻烦 -

    <style>
.red_top {
    background-color:red; 
    position:absolute; 
    width:65px; 
    height:65px; 
    z-index:-1;
    }
.red_bottom {
    align:right; 
    verical-align:bottom; 
    background-color:red; 
    position:relative; 
    width:65px; 
    height:65px; 
    z-index:-1; 
    top:-35px;}
.main_cont 
    {
        border:1px solid blue; 
        margin-top:25px; 
        margin-left:25px; 
        min-height:100px; 
        z-index:1; 
        background-color:#FFF;
    }
</style>
<body style="margin: 60px 50px;">
<div style="width:100%; border:1px solid #000;">
    <div class="red_top">&nbsp;</div>
    <div class="main_cont">Content Here</div>
    <div class="red_bottom">&nbsp;</div>
</div>

https://codepen.io/anon/pen/OxavGL

Answer 1

您可以使用psuedo-elements在元素之前和之后创建两个框，并绝对定位它们。

.box:before {
  content: '';
  width: 35px;
  height: 35px;
  background: red;
  position: absolute;
  top: -17.5px;
  left: -17.5px;
  z-index: -1;
}

.box:after {
  content: '';
  width: 35px;
  height: 35px;
  background: red;
  position: absolute;
  bottom: -17.5px;
  right: -17.5px;
  z-index: -1;
}

这是一支工作笔：https://codepen.io/anon/pen/OxaVea

如何用div制作这样的模板（非表一）

1 个答案: