首页 文章

具有动态项高度的Flexbox列

提问于
浏览 次
1

我有一个有两列的flexbox . 这些项目需要保留在指定的列中，但每个项目应该能够在用户点击项目的“阅读更多”时扩展其高度 . 效果是增加flexbox的大小而不是将项目包装到下一列 . 此外，项目文本需要从项目顶部定位50％（由于背景阴影） . 我试图使用绝对定位来定位文本，但这意味着文本溢出容器 .

这是一个JSFiddle：http://jsfiddle.net/2adxLja2/3/

$(document).ready(function() {

  $("#expand").click(function() {
    $("#readmore").removeClass("hidden");
  });
});

.grid {
  display: flex;
  flex-flow: column wrap;
  height: 450px;
}

.container {
  position: relative;
  border: 3px solid blue;
  min-height: 150px;
  width: 250px;
  margin-bottom: 5px;
  background-image: linear-gradient(to bottom, rgba(18, 59, 107, 0), rgba(18, 59, 107, 1) 50%, rgba(18, 59, 107, 1));
}

.filler {
  height: 50%;
}

.item {
  position: absolute;
  top: 50%;
  color: white;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <div class="container">
    <div class="filler">
      <span> </span>
    </div>
    <div class="item" id="item1">
      <span>Tile 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae
      </span>
      <button id="expand">Read more</button>
      <span class="hidden" id="readmore">
            sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
          </span>
    </div>
  </div>
  <div class="container">
    <div class="item">
      <span>Tile 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
      </span>
    </div>
  </div>
  <div class="container">
    <div class="item">
      <span>Tile 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
      </span>
    </div>
  </div>
</div>
html css flexbox

1 回答

  • 1

    您可以尝试使用文本元素的 max-height 来隐藏它的某些部分 . 也不需要使用position：absolute，因为你可以简单地考虑margin-top .

    这是一个例子（我用悬停替换了点击）

    .grid {
  display: flex;
  flex-flow: column wrap;
  height: 450px;
}

.container {
  position: relative;
  border: 3px solid blue;
  min-height: 150px;
  width: 250px;
  margin-bottom: 5px;
  background-image: linear-gradient(to bottom, rgba(18, 59, 107, 0), rgba(18, 59, 107, 1) 50%, rgba(18, 59, 107, 1));
}

.item {
  margin-top: 30%;
  color: white;
  max-height: 50px;
  overflow: hidden;
  cursor:pointer;
  transition:0.5s;
}

.item:hover {
  max-height: 300px;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <div class="container">
    <div class="item" id="item1">
      <span>Tile 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae
            sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
                </span>
    </div>
  </div>
  <div class="container">
    <div class="item">
      <span>Tile 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
      </span>
    </div>
  </div>
  <div class="container">
    <div class="item">
      <span>Tile 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
      </span>
    </div>
  </div>
</div>
    回复于

相关问题