Höhe der Elemente basierend auf Geschwisterhöhe anpassen

Question

Ich habe ein paar Widgets in Reihe je nach Bildschirmgröße. Hier ist mein Layout:

<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> 

und Stile sind die folgenden:

.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; 
} 

Hier ist die jsfiddle

Das Problem ist, dass ich sie von bestimmten Höhe sein wollen: eg80px , weil es die Größe hat, die für fast alle Fälle gut aussieht, aber selten habe ich etwas mehr Inhalt in der Widgetbeschreibung und dann geht es aus der Box. In diesem Fall würde ich mir wünschen, dass seine Höhe sich an die Inhaltsgröße und alle anderen Widgets anpasst. Wenn ich die Höhe der Widgets auf auto setze - nur einzelne Widgets strecken sich in der Höhe und sie sehen uneinheitlich aus. Irgendwelche Ideen, wie man die Stile ändert, um das zu erreichen, was ich brauche?

Answer 1

können Sie versuchen, mit diplay: Tabelle

.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

ich Sie jQuery an diesem JSFiddle aussehen können

https://jsfiddle.net/cnoof9hb/

verwendet die folgenden die Höhe einzustellen: -

var maxheight = 0; 

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

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

Answer 3

Verwenden Sie float:left, um ein Element zu schweben, damit das übergeordnete Element die kumulative Höhe der Kinderhöhe annimmt. Auch im übergeordneten Element verwendet werden, da die Höhe unvorhersehbar ist.

.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

unten Code Versuchen Sie es nicht „Höhe der auf Geschwister Höhe basierte Elemente anpassen“, aber Sie können es wenig ändern müssen ur Bedürfnisse

<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> 

und css

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

sehen Geige here

Answer 5

Das für flexbox wie eine perfekte Zeit scheint, ich habe einen Container div machte alle drei Elemente zu umgeben und es display: flex; Ich habe auch display: flex; zu jedem gegebenen gegeben div, dass (wie diese unten sind die Bits, die die Größe ändern müssen).

haben einen Blick

* { 
 
    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>

Ich hoffe, das hilft.