Question

我有三个div连续相邻。它们具有相同的类别和相同的结构，但它们的内容是不同的，特别是在长度上。我的问题是，所有三个div都采用具有“最长”内容的高度，而不是根据其个别内容进行调整。

这是我的HTML：

<main class="content">
 <div class="column last-match">                    
  <div class="image-wrapper">
   <a href="#"><img src="default_thumbnail.jpg"/></a>
  </div>
  <div class="text-wrapper">
   <a class="heading" href="#"><p class="heading">A Heading</p></a>
   <p class="post-excerpt">Some text</p>
   <a href="#" class="button read-more">Read More</a>
  </div>
 </div>
 <div class="column last-match">                    
  <div class="image-wrapper">
   <a href="#"><img src="default_thumbnail.jpg"/></a>
  </div>
  <div class="text-wrapper">
   <a class="heading" href="#"><p class="heading">A Heading</p></a>
   <p class="post-excerpt">Some text that's longer</p>
   <a href="#" class="button read-more">Read More</a>
  </div>
 </div>
 <div class="column next-matches">
  <div class="image-wrapper">
   <img src="next_matches.jpg"/>
  </div>
  <div class="text-wrapper">
   <p class="heading">List Heading</p>
   <ul class="match-list">
    <li class="match">some list item</li>
    <li class="match">some list item</li>
   </ul>
  </div>
 </div> 
</main>

基本的CSS：

.content {
    display: flex;
    flex-wrap: nowrap;
}

.column {
    display: flex;
    flex-direction: column;
    margin: 60px 20px;
    min-height: 100px;
    width: 33%;
}

.image-wrapper {
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.image-wrapper img {
    width: 100%;
    height: auto;
}

.post-excerpt {
    margin-bottom: 20px;
}

.button {
    display: block;
    float: left;
    margin-bottom: 20px;
    padding: 10px;
}

.match {
    font-size: 1em;
    padding-top: 15px;
}

这是我在JSFiddle上的代码：https://jsfiddle.net/4h0g73sp/5/

正如您将看到的，列将采用文本中包含最多文本的列的高度。我想要的是他们要根据自己的内容进行调整，以便在必要时达到不同的高度。

我不知道是否值得注意，我正在使用Wordpress，因此这些列最初是在一些php中。如果这很重要，我很乐意与您分享代码，请告诉我:)。

Answer 1

问题是因为Flex容器上的align-items默认为stretch所以flex项目占用了最高项目的高度（行）。

只需将其设为flex-start

即可

.content {
    display: flex;
    align-items: flex-start;
}

https://jsfiddle.net/4h0g73sp/9/

我还从flex-wrap删除了.content，因为默认情况下没有换行，因此无需声明

检查https://css-tricks.com/snippets/css/a-guide-to-flexbox/它非常有用并且演示相当好的

具有相同类别的Div适应不同的内容

1 个答案: