Question

我有一个固定大小的div，其中我使用a布局定位了多个内联flexbox。我的问题是，我还需要回复主播文本之外的div点击，但flexbox强制显示block，以便占用所有可用空间，没有空间让用户点击后台div。

HTML：

<div class="poem">
    <a class="title">Title</a>
    <a>1919</a>
    <a>Lead</a>
    <a>Bachus</a>
</div>

编译CSS（我正在使用SASS）：

.title { 
    font-size: 1.85em; 
}

.poem {
    width: 12.5em;
    height: 12.5em;
    padding: .0625;
    background-color: rgba(gray, 0.5);
    display: inline-flex;
    flex-direction: column;
}

.poem > a {
    flex: 0 0 auto;
}

.poem > a:first-child {
    flex: 1 1 auto;
}           

.poem > a:first-child:hover {
    background-color: rgba(255, 165, 0, 0.5);
}

This pen显示了我想要如何布置元素，而here是它们在悬停/点击时应该如何工作。

我的问题是，是否有任何方法可以阻止flexbox强制元素'显示到block并保留inline，或者检测是否特定点击在元素的文本上。

我意识到我可能会将每个a包裹在div中，但这将是非语义的，所以我宁愿把它作为最后的手段。

谢谢。

Answer 1

.poem {
    align-items: flex-start;
}

.poem > a:first-child {
    flex: 0 1 auto;
    margin-bottom: auto;
}

http://codepen.io/anon/pen/yGArn

单击块元素的文本

1 个答案: