时间戳

首页 > 解决方案 > Flexbox - 如何防止长文本向右移动 div？

html - Flexbox - 如何防止长文本向右移动 div？

问题描述

我正在处理一个使用 CSS Grid 和 Flexbox 组合的布局。网格正在设置结构（左侧的英雄图像和右侧的 4 行内容）。

在每个内容行中，我都有一个 flexbox，它处理右侧的缩略图图像和左侧的三行文本 - 日期、标题和作者。

但是，当任何文本行太长时，它们就会开始向上显示缩略图，如此处的第 2 行所示：

问题示例

显然，我希望缩略图保持固定，并且文本在他们触摸它之前只换行。我尝试了一大堆潜在的策略——使用溢出、浮动而不是 flexbox，但找不到诀窍。有任何想法吗？

这是代码，为简洁起见省略了第 3 行和第 4 行，以及 Codepen 链接：

https://codepen.io/anon/pen/dBWyzb

.wrapper {
  width: 1200px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(100px, auto));
  grid-template-areas:
    "hero row1"
    "hero row2"
    "hero row3"
    "hero row4";
  grid-gap: 10px;
}

.hero {grid-area: hero;}
.row1 {grid-area: row1;}
.row2 {grid-area: row2;}

.flex {
  display: flex;
  background-color: lightblue;
  align-items: center;
}

.thumbnail {
  width: 100px;
  height: 100px;
  margin-left: auto;
}

img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
<div class="wrapper">
  <div class="grid">
    
    <div class="hero">
      <img src="https://dummyimage.com/600x400/000/fff"/>
    </div>
    
    <!-- Row 1 -->
    <div class="row1">
      <div class="flex">
        
        <div class="text">
          <div class="date">12 JULY 2019</div>
          <h3>Title</h3>
          <div class="author">Author Name</div>
        </div>
        
        <div class="thumbnail">
          <img src="https://dummyimage.com/600x400/000/fff"></img>
        </div>
      
      </div> <!-- end flex -->
    </div> <!-- end row -->
    
    <!-- Row 2 -->
    <div class="row2">
      <div class="flex">
        
        <div class="text">
          <div class="date">12 JULY 2019</div>
          <h3>A really long title seems to be shifting the right-hand image up, which is not ideal! Any ideas, internet? ------> </h3>
          <div class="author">Author Name</div>
        </div>
        
        <div class="thumbnail">
          <img src="https://dummyimage.com/600x400/000/fff"></img>
        </div>
      
      </div> <!-- end flex -->
    </div> <!-- end row -->


  </div>
</div>

标签： htmlcssflexboxcss-grid

解决方案

添加flex: 1;到.textdiv，这样 flexbox 可以管理它可以占用多少空间：

.wrapper {
  width: 1200px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(100px, auto));
  grid-template-areas: "hero row1" "hero row2" "hero row3" "hero row4";
  grid-gap: 10px;
}

.hero {
  grid-area: hero;
}

.row1 {
  grid-area: row1;
}

.row2 {
  grid-area: row2;
}

.flex {
  display: flex;
  background-color: lightblue;
  align-items: center;
}

.text {
  flex: 1;
}

.thumbnail {
  width: 100px;
  height: 100px;
  margin-left: auto;
}

img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
<div class="wrapper">
  <div class="grid">

    <div class="hero">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>

    <!-- Row 1 -->
    <div class="row1">
      <div class="flex">

        <div class="text">
          <div class="date">12 JULY 2019</div>
          <h3>Title</h3>
          <div class="author">Author Name</div>
        </div>

        <div class="thumbnail">
          <img src="https://dummyimage.com/600x400/000/fff"></img>
        </div>

      </div>
      <!-- end flex -->
    </div>
    <!-- end row -->

    <!-- Row 2 -->
    <div class="row2">
      <div class="flex">

        <div class="text">
          <div class="date">12 JULY 2019</div>
          <h3>A really long title seems to be shifting the right-hand image up, which is not ideal! Any ideas, internet? ------> </h3>
          <div class="author">Author Name</div>
        </div>

        <div class="thumbnail">
          <img src="https://dummyimage.com/600x400/000/fff"></img>
        </div>

      </div>
      <!-- end flex -->
    </div>
    <!-- end row -->


  </div>
</div>

推荐阅读