Question

我希望包含文本和背景颜色的所有内部div都与外部div（col）具有相同的高度。

有没有办法实现没有 jQuery？

＆＃13;

.row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
}

.col {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 1em;
    border: solid;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.col img{
    width:100%;
    height:auto;
}

＆＃13;

   <div class="row">
    <div class="col"> 
        <div><img src="" alt="" /></div>
        <div style="background-color:#ff0000;">  
           This is a short text.
        </div>
    </div>
    
    <div class="col">
        <div><img src="" alt="" /></div> 
        <div style="background-color:#ff3654;" > 
            This is a text about how much I hate fucking around ith CSS when I'm not a pro. I wasted so much time on this issue I don't even mind writing this text. Sure you could use lorem ipsum but why bother, time you enjoy wasting is not wasted.
        </div> 
    </div>

        <div class="col"> 
        <div><img src="" alt="" /></div>
        <div style="background-color:#ff0000;">  
          This is CSS, just wanted to let you know that you suck.
        </div>
    </div>
       
</div>

＆＃13;

https://jsfiddle.net/hcmnztof/1/

Answer 1

您可以再次使用弹性框.col：

.col {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* default value */
}
.col > :last-child {
  flex-grow: 1;
}

.row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}
.col {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 1em;
  border: solid;
  justify-content: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.col > :last-child {
  flex-grow: 1;
}
.col img {
  width: 100%;
  height: auto;
}

<div class="row">
  <div class="col">
    <div>
      Image1
    </div>
    <div style="background-color:#ff0000;">
      Lorem ipsum.
    </div>
  </div>
  <div class="col">
    <div>
      Image2 <br/> Image2
    </div>
    <div style="background-color:#ff3654;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.
    </div>
  </div>
  <div class="col">
    <div>
      Image3 <br/> Image3 <br/> Image3
    </div>
    <div style="background-color:#ff0000;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
    </div>
  </div>

</div>

Answer 2

感谢您的投入。我用这个页面来获得一些关于flexbox的基本知识。 CSS-Tricks A guide to flexbox 然后我从头开始想出我想要的东西：jsfiddle

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction:row;
    padding: 10% 0 10% 0;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row img{
    width:100%;
    height:auto;
}

.col {
    -webkit-box-flex:1;
    -moz-box-flex:1;
    flex:1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction:column;
    align-items:stretch;
    margin-right:3%;
     
}
.subcol{
   -webkit-box-flex:1;
   -moz-box-flex:1;
   flex:1 auto;
   margin-top:-1%;

   -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}


.subcol h2{
    text-align:center;
    color:#ffffff;
    padding: 10% 10% 0 10%;
    font-weight:200;
    font-size:2.2em;
    line-height:1;
    text-transform:uppercase;
    margin-bottom:13%;
}

.subcol p{
    text-align:center;
    padding: 0 10% 10% 10%;
    margin-top:-1.2%;
    color:#ffffff;
    font-size:0.9em;
}

   <div class="row">
    <div class="col"> 
        <img src="http://lorempixel.com/50/50" alt="" />
        <div  class="subcol" style="background-color:#ff0000;">  
            <h2>Test headline</h2>
            <p>This is a short text.</p>
        </div>
    </div>
    
    <div class="col">
        <img src="http://lorempixel.com/120/150" alt="" />
        <div  class="subcol" style="background-color:#ff3654;" > 
            <h2>Test headline</h2>
            <p>This is a text about how much I hate fucking around ith CSS when I'm not a pro. I wasted so much time on this issue I don't even mind writing this text. Sure you could use lorem ipsum but why bother, time you enjoy wasting is not wasted.</p>
        </div> 
    </div>

        <div class="col"> 
            <img src="http://lorempixel.com/100/150" alt="" />
        <div class="subcol" style="background-color:#ff0000;">  
            <h2>Test headline</h2>
            <p>This is CSS, just wanted to let you know that you suck.</p>
        </div>
    </div>
       
</div>

响应式Flexbox Divs

2 个答案: