divを使ってこのようなテンプレートを作成する方法（テーブル以外のもの）

-1

このテンプレートを貼り付けてください。テーブルでそれを行う方法を知っているが、divでそれを必要とする。コーナーは幅（35x35vと65x35h）で固定され、主容器は適応幅を持っています。フロートとインラインブロックを試みましたが、成功しませんでした。divを使ってこのようなテンプレートを作成する方法（テーブル以外のもの）

のコメントを読んだ後、私は、zインデックスを持つ赤い四角を試してみた：トップはOKですが、下の四角とのトラブルを持っている -

<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

出典

2017-10-16 Cove

は、それはちょうどあなたがサイズを変更することができます空のボックスことになっていますか？それとも、何かを含んでいると思われますか？あなたはそれで何をしようとしていますか？箱に内容を入れただけのデザインスタイル？ –

少なくともこれを自分でコード化しようとします。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻り、あなたが試したことを説明してください。 –

2つの赤い四角形を作成し、 'position：absolute'でそれらを配置しますか？ –

あなたは疑似を使用することができます要素の前後に2つのボックスを作成し、絶対的に配置する要素。ここで

.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

出典

2017-10-16 16:04:07

まあ、それは本当に素晴らしいアプローチですが、FF z-indexではこの状態では動作しません。赤い四角はブラックボックスの上にありますが、下にはありません。 – Cove

divを使ってこのようなテンプレートを作成する方法（テーブル以外のもの）

答えて

関連する問題