DIV全体をカバーするアンカー - しかしチャレンジとjavascriptはありません

Question

私はちょっとした設計課題に取り組んでいます。

基本的に、それは私はそれがどこかに私を取り、それをクリックしたときを意味し、材料設計のカードです。

簡単なルートは、アンカーでコンテンツを囲むことです（今のように）。ただし、この場合、アンカーテキストを「My keyword」にしたいだけです。ここで

は、単純なHTML出力です：だから

<a class="post-card md-card"> 
    <div class="md-card-title aspect-16x9"> 
     <div class="title-large"></div> 
    </div> 
    <div class="md-card-content"> 
     <div class="sup-text"></div> 
    </div> 
</a> 

、私がやりたい2つのことは、以下のとおりです。

• のみアンカー
• 内のキーワードが全体をクリックできるようになる必要があり（リンクは外部部門全体をカバーしています）

ここでは、カルト：上部に青いボックスは、アスペクト比が設定されている

• 、青いボックス内のテキストは、フレキシボックス
• 用いてセンタリングされる
• そのない 一定の高さを意味するホワイトボックスではありませんここでは固定の高さのどちらか

は、アスペクト比が計算される方法は次のとおりです。

.AspectRatio(@widthRatio:16; @heightRatio:9; @useableWidth:100%) { 
    &:extend(.clearfix all); 

    overflow:hidden; 
    max-width:@useableWidth; 

    &::before { 
     content:""; 
     float:left; 
     padding-top:percentage(@heightRatio/@widthRatio); 
    } 
} 

だから私はキーワードのテキストをそのままにしておく必要がありますが、全体をクリック可能にする必要があります。

私は上に絶対配置されたアンカーを使用して遊んでいましたが、私はそれを行うことはできますが、テキストを動かさずに下に伸びることはできません。

どのCSSの看護師にもいくつかアイデアがありますか？

Answer 1

これはあなたに良い出発点を与える必要があります...全体のポストカードが相対配置されている

ので

JSFiddle

、について説明

.post-card { 
 
    background-color: #63d9ff; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 

 
.post-card * { 
 
    box-sizing: inherit; 
 
} 
 

 
.post-card .md-card-title { 
 
    bottom: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    text-align: center; 
 
    top: 0; 
 
} 
 

 
.post-card .md-card-title .content-prop, 
 
.post-card .md-card-title .content { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.post-card .md-card-title .content-prop { 
 
    padding-top: 56%; 
 
    width: 0; 
 
} 
 

 
.post-card .md-card-title .content { 
 
    padding: 1rem; 
 
    width: 100%; 
 
} 
 

 
.post-card .space-prop { 
 
    display: block; 
 
    padding-top: 56%; 
 
} 
 

 
.md-card-content { 
 
    background-color: grey; 
 
    padding: 1rem; 
 
}

<div class="post-card md-card"> 
 
    <a class="md-card-title aspect-16x9" href="#"> 
 
     <span class="content-prop"></span><!-- 
 
     --><span class="content">My Keyword</span> 
 
    </a> 
 
    <span class="space-prop"></span> 
 
    <div class="md-card-content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis mauris ut eros consectetur efficitur vitae at leo. 
 
    </div> 
 
</div>

...アンカーは、その中に絶対的に配置されます。アンカーには、親コンテナを覆うように、上、左、下、右の値0が与えられます。

content-propとspace-propの高さは指定されていませんが、上部のパディングは56％です。これは、最上部のパディング値が16：9の比率で動作する幅の56％であることを意味します。スペースバナーは、ポストカードの上部に空の隙間を加えてアンカーのためのスペースを確保するためにここで使用されます。

content-prop要素とcontent要素の両方がインラインブロックを表示するように設定され、垂直方向に中央揃えに設定されます。小道具は内容物よりも背が高いので、内容物は中央に浮く。これらの2つの要素間のHTMLコメントは空白を排除し、プロペラが同じ水平行にある場合でもコンテンツdivを100％幅に設定できます。