我已经创建了一排项目并使用flex进行了高度匹配.然而,当我只想让它成为自动宽度时,这会导致我在项目中的链接变为全宽.我已经尝试过设置它,display: inline-block
但这还没有解决它.
这是一个小提琴:https://jsfiddle.net/v0o2z9g3/2/
.row {
display: flex;
flex-direction: row; }
.col {
display: flex;
flex-direction: column;
padding: 0 0 15px 0;
margin: 0 19px 65px;
width: calc((100% / 3) - 38px);
background: red; }
.col .resource-item__title {
font-weight: bolder; }
.col .resource-item__summary {
margin: 0 0 5px 0; }
.col .resource-item__link {
display: inline-block;
background: yellow;
margin-top: auto; }
.col .resource-item__icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
color: green;
font-size: 22px;
cursor: default; }
.col .resource-item__icon.disabledIcon {
color: red; }
Shale Gas Briefing Final
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...
view
Shale Gas Briefing Final
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...
Download
Shale Gas Briefing Final
Far sadsa das das das das dfar away, behind the word mountains, far from the countries Vokalia hgghk hkj hkljand Consonantia, there live ...
Download
我基本上要求黄色块结束文本结束的位置,而不是伸展到容器边缘.
谢谢
你可以简单地设置align-self:flex-start
为班级.resource-item__link
.在此解决方案中,超链接()都在同一级别上,而不是直接在每列(
.col
)的内容之后.
守则(https://jsfiddle.net/v0o2z9g3/4/):
.row {
display: flex;
flex-direction: row;
}
.col {
display: flex;
flex-direction: column;
padding: 0 0 15px 0;
margin: 0 19px 65px;
width: calc((100% / 3) - 38px);
background: red;
}
.col .resource-item__title {
font-weight: bolder;
}
.col .resource-item__summary {
margin: 0 0 5px 0;
}
.col .resource-item__link {
align-self:flex-start;
background: yellow;
margin-top: auto;
}
.col .resource-item__icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
color: green;
font-size: 22px;
cursor: default;
}
.col .resource-item__icon.disabledIcon {
color: red;
}
Shale Gas Briefing Final
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...
view
Shale Gas Briefing Final
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...
Download
Shale Gas Briefing Final
Far sadsa das das das das dfar away, behind the word mountains, far from the countries Vokalia hgghk hkj hkljand Consonantia, there live ...
Download