如何使高度与兄弟高度相同

以下是我的HTML。我有三栏共3张牌。一张卡片的高度设置为弯曲，以便自动调整至其内容，并且我希望将同一高度反映到其兄弟卡片上。另外，我的要求是不使用表格。我已尝试显示CSS属性到目前为止没有成功。我重视的是如何看起来到目前为止如何使高度与兄弟高度相同

图像：

.user-panel, 
 
.user-panel .card { 
 
    min-height: 170px; 
 
    display: flex; 
 
} 
 

 
.user-panel, 
 
.user-panel .card .item { 
 
    height: inherit; 
 
    text-align: center; 
 
}

<div class="row no-padding user-panel"> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
       <div class="row"><i class="user-profile-icon"></i> </div> 
 
        <div>{{data}}</div> 
 
        <div>(015106)</div> 
 
       </div> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
       <div>MY ACCESSES</div> 
 
       </div> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
       <div>MY ACCESSES</div> 
 
      </div> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

来源

2017-05-04 Delfin

没看懂。请详细解释@Delfin –

http://stackoverflow.com/a/33147/3583859解决方法可能有所帮助 –

我很确定''span''中的'div'在HTML中是非法的 –

添加height: 100%;到.card和移动min-height外容器。

.user-panel { 
 
    min-height: 170px; 
 
} 
 

 
.user-panel, .user-panel .card { 
 
    display: flex; 
 
    border: 1px solid #ccc; 
 
    height: 100%; 
 
} 
 

 
.user-panel, 
 
.user-panel .card .item { 
 
    height: inherit; 
 
    text-align: center; 
 
}

<div class="row no-padding user-panel"> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
      <div class="row"><i class="user-profile-icon"></i> </div> 
 
      <div>{{data}}</div> 
 
      <div>(015106)</div> 
 
      <div>(015106)</div> 
 
      <div>(015106)</div> 
 
      <div>(015106)</div> 
 
      <div>(015106)</div> 
 
      <div>(015106)</div> 
 
      <div>(015106)</div> 
 
      <div>(015106)</div> 
 
      <div>(015106)</div> 
 
      <div>(015106)</div> 
 
      <div>(015106)</div> 
 
      </div> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
       <div>MY ACCESSES</div> 
 
      </div> 
 
      </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
      <div>MY ACCESSES</div> 
 
      </div> 
 
      </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="row no-padding user-panel"> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
      <div class="row"><i class="user-profile-icon"></i> </div> 
 
      <div>{{data}}</div> 
 
      <div>(015106)</div> 
 
      </div> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
       <div>MY ACCESSES</div> 
 
      </div> 
 
      </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
      <div>MY ACCESSES</div> 
 
      </div> 
 
      </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-05-04 04:56:47

工作真棒！ @迈克尔 – Delfin

使用Flexbox的方法，你可以很容易地做到这一点。 连续的div的高度将根据任何元素的最大高度的高度。

这里是一个工作示例我已经用你的代码中创建：

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    box-sizing: border-box; 
 
} 
 

 
.user-panel { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.user-panel .col { 
 
    display: flex; 
 
    padding: 0.5em; 
 
    width: 33.33%; 
 
} 
 

 
.card { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: red; 
 
    padding: 1em; 
 
    width: 100%; 
 
} 
 

 
.card .item-text-wrap { 
 
    flex: 1 0 auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="row no-padding user-panel"> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
       <div class="row"><i class="fa fa-user fa-4x"></i> </div> 
 
       <div>Some Data</div> 
 
       <div>Some Data</div> 
 
      </div> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
       <div>MY ACCESSES</div> 
 
      </div> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col col-33 no-padding"> 
 
    <div class="card no-padding"> 
 
     <div class="item item-text-wrap"> 
 
     <span> 
 
      <div> 
 
       <div>MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES </div> 
 
      </div> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div>

来源

2017-05-04 04:56:55

如何使高度与兄弟高度相同

回答

相关问题