堆栈内存溢出
  简体   繁体   English

使用flexbox获取所有元素相同的高度

[英]Using flexbox to get all elements same height

 原文  2019-03-24 12:07:35  3   1    html/ css/ css3/ flexbox

问题描述

I have to make that each part of the container is same height in all containers and since content can vary a lot for each container I just can't set hardcoded height because some of these inner containers exist for one but doesn't get added for other. 我必须使容器的每个部分在所有容器中都是相同的高度，并且由于每个容器的内容可能变化很大，我只是不能设置硬编码高度，因为这些内部容器中的一些存在于一个但是没有添加其他。 Interested if this can be achieved by only using CSS, without javascript 有兴趣，如果只使用CSS，没有javascript可以实现这一点

So far I have tried with flexbox but not sure what I was doing wrong because it didn't work for me really and each container didn't take equal height based on the longest container. 到目前为止，我已经尝试过使用flexbox，但不确定我做错了什么，因为它对我来说真的不起作用，而且每个容器根据最长的容器没有采取相同的高度。

Basically, what I have to do - match each container to be in equal height. 基本上，我必须做的事情 - 将每个容器匹配到相同的高度。 If some text doesn't exist in one but exists in other needs to add empty space In pictures, it is something like this - 如果一个文本不存在于一个但存在于其他需要添加空白空间在图片中，它是这样的 -

Currently I have - 目前我有 - 当前

Expected (notice empty spaces also) - 预期（通知空白区域） -

预期

My fiddle code with HTML structure I have - Fiddle code 我用HTML结构的小提琴代码 - 小提琴代码

Maybe needs to change some HTML structure also to get this to work? 也许需要更改一些HTML结构才能使其工作？ (ie moving container with a yellow border inside details container with purple border?). （即在带有紫色边框的细节容器内移动带有黄色边框的容器？）。 The most important part is to not use javascript but only CSS! 最重要的部分是不使用javascript而只使用CSS！

Thank you all! 谢谢你们！

My current HTML structure is something like this (also visible in fiddle) - 我目前的HTML结构是这样的（在小提琴中也可见） - 

<ul>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="some-extra-block">
        Some extra info for some li-item
      </div>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">Title subtitle goes here in 2 rows</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">if subtitle more than 2 rows then gets cut off all the rest and doesn't show it like this </div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here which will be atleast 3 lines long</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="before-price">Some text</div>
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="some-extra-block">
        Some extra info for some li-item
      </div>
      <div class="details">
        <div class="price">
                  <div class="before-price">Some text</div>
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
</ul>

1 个解决方案

解决方案1
 0  2019-05-12 03:53:15

Try this: 尝试这个： 

 * { box-sizing: border-box; } ul { list-style-type: none; margin: 0; padding: 0; } @supports(flex-wrap:wrap) { ul { display: flex; flex-wrap: wrap; } } .li-item { margin-right: 10px; margin-bottom: 10px; padding: 10px; border: 1px solid black; width: 23%; width: calc(25% - 10px); min-width: 11em; /* fallback styles */ display: inline-block; vertical-align: top; } .li-item-inner { border: 1px solid red; padding: 7px; height: 100%; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } .heading { border: 1px solid green; } .subtitle { overflow: hidden; max-height: 32px; } .photo { border: 1px solid blue; display: block; width: 100%; height: 70px; } .some-extra-block { border: 1px solid orange; } .details { border: 1px solid purple; margin-top: auto; /* push this element to the bottom when there is extra available space */ } 
 <ul> <li class="li-item"> <div class="li-item-inner"> <div class="heading"> <div class="title">Some title text</div> <div class="subtitle">Title subtitle goes here</div> </div> <a href="#" class="photo"><div class="img">Picture here...</div></a> <div class="some-extra-block"> Some extra info for some li-item </div> <div class="details"> <div class="price"> <div class="item-price">15$</div> </div> <div class="small-images"> <div class="small-image">Some image here</div> <div class="small-image">Some image here</div> </div> <div class="see-item"> <a href="#">click here to see item</a> </div> </div> </div> </li> <li class="li-item"> <div class="li-item-inner"> <div class="heading"> <div class="title">Some title text goes here</div> <div class="subtitle">Title subtitle goes here in 2 rows</div> </div> <a href="#" class="photo"><div class="img">Picture here...</div></a> <div class="details"> <div class="price"> <div class="item-price">15$</div> </div> <div class="small-images"> <div class="small-image">Some image here</div> <div class="small-image">Some image here</div> </div> <div class="see-item"> <a href="#">click here to see item</a> </div> </div> </div> </li> <li class="li-item"> <div class="li-item-inner"> <div class="heading"> <div class="title">Some title text goes here</div> <div class="subtitle">if subtitle more than 2 rows then gets cut off all the rest and doesn't show it like this </div> </div> <a href="#" class="photo"><div class="img">Picture here...</div></a> <div class="details"> <div class="price"> <div class="item-price">15$</div> </div> <div class="small-images"> <div class="small-image">Some image here</div> <div class="small-image">Some image here</div> </div> <div class="see-item"> <a href="#">click here to see item</a> </div> </div> </div> </li> <li class="li-item"> <div class="li-item-inner"> <div class="heading"> <div class="title">Some title text goes here which will be atleast 3 lines long</div> <div class="subtitle">Title subtitle goes here</div> </div> <a href="#" class="photo"><div class="img">Picture here...</div></a> <div class="details"> <div class="price"> <div class="before-price">Some text</div> <div class="item-price">15$</div> </div> <div class="small-images"> <div class="small-image">Some image here</div> <div class="small-image">Some image here</div> </div> <div class="see-item"> <a href="#">click here to see item</a> </div> </div> </div> </li> <li class="li-item"> <div class="li-item-inner"> <div class="heading"> <div class="title">Some title text</div> <div class="subtitle">Title subtitle goes here</div> </div> <a href="#" class="photo"><div class="img">Picture here...</div></a> <div class="details"> <div class="price"> <div class="item-price">15$</div> </div> <div class="small-images"> <div class="small-image">Some image here</div> <div class="small-image">Some image here</div> </div> <div class="see-item"> <a href="#">click here to see item</a> </div> </div> </div> </li> <li class="li-item"> <div class="li-item-inner"> <div class="heading"> <div class="title">Some title text</div> <div class="subtitle">Title subtitle goes here</div> </div> <a href="#" class="photo"><div class="img">Picture here...</div></a> <div class="details"> <div class="price"> <div class="item-price">15$</div> </div> <div class="small-images"> <div class="small-image">Some image here</div> <div class="small-image">Some image here</div> </div> <div class="see-item"> <a href="#">click here to see item</a> </div> </div> </div> </li> <li class="li-item"> <div class="li-item-inner"> <div class="heading"> <div class="title">Some title text</div> <div class="subtitle">Title subtitle goes here</div> </div> <a href="#" class="photo"><div class="img">Picture here...</div></a> <div class="some-extra-block"> Some extra info for some li-item </div> <div class="details"> <div class="price"> <div class="before-price">Some text</div> <div class="item-price">15$</div> </div> <div class="small-images"> <div class="small-image">Some image here</div> <div class="small-image">Some image here</div> </div> <div class="see-item"> <a href="#">click here to see item</a> </div> </div> </div> </li> </ul>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 css flexbox：所有元素的高度相同？ - css flexbox: same height for all elements? Flexbox-所有卡上的高度相同 - Flexbox - same height on all cards 如何使用 scroll-y 和 flexbox 获得 2 个相同高度的 div - How get 2 divs same height using scroll-y and flexbox 如何使用flexbox使所有标签的高度相同？ - How to make all labels the same height with flexbox? 如何让flexbox列的高度相同？ - How to get flexbox columns to be the same height? 使用Flexbox使两列的高度相同 - Make two columns the same height using Flexbox Flexbox响应高度的元素 - Flexbox responsive height of elements 无法使用 flexbox 正确显示相同宽度和高度的元素 - unable to display elements of same width and height correctly with flexbox 使用flexbox获得等高的行，而不是列 - Using flexbox to get equal height rows, not columns 与flexbox高度相同的图像 - same height images with flexbox
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM