当前位置:  开发笔记 > 前端 > 正文

阻止儿童弯曲全宽

如何解决《阻止儿童弯曲全宽》经验,为你挑选了1个好方法。

我已经创建了一排项目并使用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

我基本上要求黄色块结束文本结束的位置,而不是伸展到容器边缘.

谢谢



1> Sebastian Br..:

你可以简单地设置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 ...

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
推荐阅读
wurtjq
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有