根據兄弟姐妹身高調整元素的高度

Question

根據屏幕大小，我有幾個小部件在排隊。這裏是我的佈局：

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
    <div class="widget"> 
    <div class="name"> 
     Block name 
    </div> 
    <div class="description"> 
     Some description goes here 
    </div> 
    </div> 
</div> 

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
    <div class="widget"> 
    <div class="name"> 
     Block name 
    </div> 
    <div class="description"> 
     Some very long description goes here 
    </div> 
    </div> 
</div> 

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
    <div class="widget"> 
    <div class="name"> 
     Block name 
    </div> 
    <div class="description"> 
     Some description goes here 
    </div> 
    </div> 
</div> 

和樣式如下：

.widget { 
    width: 100%; 
    margin: 10px; 
    padding: 10px; 
    background-color: white; 
    //height: auto; 
    height: 80px; 
    border: 1px silver solid; 
    font-size: 18px; 
} 

.name { 
    font-weight: bold; 
    height: 40px; 
    color: #082654; 
} 

.description { 
    color: #4AB6E1; 
} 

這裏是jsfiddle

的問題是，我想一定高度的他們：eg80px ，導致它的大小几乎適用於所有情況，但很少在窗口小部件描述中有一些更長的內容，然後開箱即用。所以在這種情況下，我希望它的高度適應內容大小和所有其他小部件的高度。當我將窗口小部件的高度設置爲自動時 - 只有單個窗口部件的高度延伸並且看起來不均勻。任何想法如何改變風格，以實現我所需要的？

Answer 1

你可以嘗試使用diplay：表

.widget { 
 
    width: 100%; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background-color: white; 
 
    //height: auto; 
 
    height: 80px; 
 
    display:table; 
 
    border: 1px silver solid; 
 
    font-size: 18px; 
 
} 
 

 
.name { 
 
    font-weight: bold; 
 
    height: 40px; 
 
    color: #082654; 
 
} 
 

 
.description { 
 
    color: #4AB6E1; 
 
}

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
    <div class="widget"> 
 
    <div class="name"> 
 
     Block name 
 
    </div> 
 
    <div class="description"> 
 
     Some description goes here 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
    <div class="widget"> 
 
    <div class="name"> 
 
     Block name 
 
    </div> 
 
    <div class="description"> 
 
     Some very long description goes here 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
    <div class="widget"> 
 
    <div class="name"> 
 
     Block name 
 
    </div> 
 
    <div class="description"> 
 
     Some description goes here 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

我，你可以使用jQuery看這個的jsfiddle

https://jsfiddle.net/cnoof9hb/

中使用以下步驟設置高度： -

var maxheight = 0; 

$('div div.widget').each(function() { 
    maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight); 
}); 

$('div div.widget').height(maxheight); 

Answer 3

使用float:left浮動元素以使父元素獲取其子節點高度的累積高度。由於高度是不可預知的，因此在父元素中使用height:auto;。

.widget { 
 
     width: 100%; 
 
     margin: 10px; 
 
     padding: 10px; 
 
     background-color: white; 
 
     /*height: auto;*/ /* removed this */ 
 
     border: 1px silver solid; 
 
     font-size: 18px; 
 
    
 
     /* Added these 2 lines */ 
 
     float:left; 
 
     height: auto; 
 
    } 
 

 
    .name { 
 
     font-weight: bold; 
 
     height: 40px; 
 
     color: #082654; 
 
    } 
 

 
    .description { 
 
     color: #4AB6E1; 
 
    }

Answer 4

試試下面的代碼它不「適應基於同胞高度元素的高度」，但你可能需要改變它有點適應烏爾需求

<div class="t-row"> 

    <div class="col">Some description goes here Some description goes here</div> 

    <div class="col">on goes here</div> 

    <div class="col">here</div> 

    <div class="col">Some description goes here Some description goes here Some description goes here Some description goes hereSome description goes here Some description goes here</div> 

</div> 

和css

.t-row{ 
    display: table-row; 
} 
.col{ 
    display: table-cell; 
    width: 25%; 
    border: 1px solid silver; 
    padding: 15px; 
    background-color: white; 
} 

看到小提琴here

Answer 5

這似乎是一個完美的時間flexbox，我做了一個div容器包圍所有3個元素，並賦予它display: flex;我也給display: flex;每個DIV吼叫說（因爲這些是需要改變大小的位）。

看一看

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.container > div { 
 
    display: flex; 
 
    width: 33.33%; 
 
} 
 
.widget { 
 
    width: 100%; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background-color: white; 
 
    border: 1px silver solid; 
 
    font-size: 18px; 
 
} 
 
.widget .name { 
 
    font-weight: bold; 
 
    height: 40px; 
 
    color: #082654; 
 
} 
 
.widget .description { 
 
    color: #4AB6E1; 
 
}

<div class="container"> 
 
    <div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
    <div class="widget"> 
 
     <div class="name"> 
 
     Block name 
 
     </div> 
 
     <div class="description"> 
 
     Some description goes here 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
    <div class="widget"> 
 
     <div class="name"> 
 
     Block name 
 
     </div> 
 
     <div class="description"> 
 
     Some very long description goes here 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
    <div class="widget"> 
 
     <div class="name"> 
 
     Block name 
 
     </div> 
 
     <div class="description"> 
 
     Some description goes here 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

我希望這有助於。