Füllen Sie den übergeordneten Containerhintergrund gleichmäßig mit unterschiedlichem Text.

Question

Wie kann ich erreichen, dass die Container-Hintergründe ihre Höhen für verschiedene Textlängen für jedes Rasterelement in der Spalte gleichermaßen ausfüllen?

SCSS:

.use-case-block-container{ 
    margin: 15px; 
} 
.use-case-block{ 
    margin: 15px; 
    display: block; 
    text-align: center; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    background: rgba(0,0,0,0.32); 
} 

HTML

<div class="row"> 
     <hr> 
     <h2>Use Cases</h2> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

     <div class="row"> 
     <div class="col-md-12"> 
     <div class="row"> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">CUSTOMER EXPOSURE</a> 
        </div> 
       </div> 
       </div> 

       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">CUSTOMER ACTIVITY HISTORY</a> 
        </div> 
       </div> 
       </div> 

     </div> 
     <div class="row"> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">CUSTOMER DATA GOVERNANCE</a> 
        </div> 
       </div> 
       </div> 

       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">DATA LINEAGE</a> 
        </div> 
       </div> 
       </div> 

     </div> 
     <div class="row"> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">AUTOMATED ACCESS OF UNSTRUCTURED DATA</a> 
        </div> 
       </div> 
       </div> 

       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">REGULATORY COMPLIANCE – SIFI</a> 
        </div> 
       </div> 
       </div> 

     </div> 
     <div class="row"> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">REGULATORY COMPLIANCE – CCAR</a> 
        </div> 
       </div> 
       </div> 

       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">REGULATORY COMPLIANCE – POST TRADE COMMUNICATIONS</a> 
        </div> 
       </div> 
       </div> 

     </div> 
     <div class="row"> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">PII DATA IDENTIFICATION AND LOCATION</a> 
        </div> 
       </div> 
       </div> 
       <div class="col-xs-6 col-md-6 "> 
       <div class="use-case-block-container"> 
        <div class="use-case-block"> 
        <a href="/use_cases">COMPREHENSIVE DATA REPAIR</a> 
        </div> 
       </div> 
       </div> 
     </div> 
     </div> 
     </div> 
    </div> 

Ergebnis:

Das Problem ist, dass die jede Reihe von Elementen auf jeder Seite den gleichen Block padding haben sollte . Wenn zum Beispiel eines der Objekte 3 statt 2 Zeilen hat, sollte jeder der Blöcke auf 3 Zeilen statt auf 2 oder 1 eingestellt werden. Auf diese Weise sind alle Container gleich groß und reaktionsfähig.

Answer 1

Sie könnten sie immer in js durchlaufen, finden Sie die größte und weisen Sie diese Höhe allen anderen zu.

Allerdings denke ich, es ist einfacher, nur einige vernünftige min-height Standardeinstellungen in css zu setzen.

Answer 2

wenn Sie don `t JS verwenden, können Sie Flexbox gleich Säulenhöhen verwenden:

Spaltencontainer wäre:

Anzeige: flex;

eine schnelle Suche nach Flexbox gleiche Spaltenhöhen.

Answer 3

Sie müssten für alle .use-case-block-containers eine geeignete feste Höhe festlegen und Medienabfrage-Haltepunkte verwenden, um feste Höhen anzupassen, wenn sich die Texthöhe ändert.

Jede .use-case-block-container kann auch display: flex; align-items: center; justify-content: center; für die vertikale und horizontale Zentrierung von Text haben.