锚覆盖整个DIV - 但有挑战，没有javascript

问题描述：

我正在设计一个小挑战，现在它越来越好。锚覆盖整个DIV - 但有挑战，没有javascript

从本质上讲，它是一种材料设计卡，这意味着，当我点击它，它需要我在别处。

简单的路线是（并且现在是）用锚点包围内容。但是，在这种情况下，我只希望锚文本是“我的关键字”。

下面是简单的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>

因此，两件事情我想要做的是：

只有关键字锚内
可以点击整件事（该链接覆盖整个外部的div）

这里的东西，使它更diffic崇拜：

在顶部的蓝色方块的纵横比的设定，这意味着它不是一个恒定高度
蓝盒子内的文本时使用的Flexbox的
中心的白盒是不是一个固定高度或者

这里的纵横比是如何计算的：

.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大师有一些想法？

所以基本上你真的想要避免仅仅使用javascript来为你做点击，并从锚定中获取href .. – moped

你希望整个事情都是可点击的，但是你不希望整个事情成为一个链接？为什么？这些是相互矛盾的要求。 – keithjgrant

@moped - 是的，这些链接专门针对内部链接，所以没有任何阻碍。 –

答

这应该给你一个很好的起点......

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

JSFiddle

所以交代......

整个明信片相对于定位，然后将锚固定在其中。锚点的顶部，左侧，底部和右侧值为0，这使得它覆盖了它的父容器。

content-prop和space-prop没有被给予高度，但是具有56％的顶部填充。这意味着它们的顶部填充值是它们宽度的56％，以16：9的比例出现。此处使用空间横幅在明信片顶部添加一个空白间隙，以便为锚点留出空间。

content-prop和内容元素都被设置为显示内嵌块并垂直对齐到中间。由于道具比内容高，所以内容漂浮在中心。这两个元素之间的HTML注释消除了空白区域，因此即使当prop位于同一水平行时，content div也可以设置为100％宽度。

哈哈，猜猜迈克尔？我刚刚提出了相同的解决方案。然而，正如你已经发布的，我知道这个代码的作品，我会接受这个答案。 –

锚覆盖整个DIV - 但有挑战，没有javascript

相关推荐