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

以下是我的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

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

回答

相關問題