Stellen Spannweite 100% der äußeren div Höhe

Simple HTML unten. Der Zweck besteht darin, die linke Feldhöhe auf 100% der äußeren div-Höhe zu bringen und den Text vertikal zu zentrieren (d. H. "Abc" sollte eine Zeile mit "ghi" werden). Ergebnis auf dem Screenshot (chrome, win10): styles hat keine Wirkung.Stellen Spannweite 100% der äußeren div Höhe

"row-eq-height" verwendet, um Spalten mit gleicher Höhe zu erstellen und werden von here kopiert.

<html> 
 
<head> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <style> 
 
     .row-eq-height { 
 
      display: -webkit-box; 
 
      display: -webkit-flex; 
 
      display: -ms-flexbox; 
 
      display: flex; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div style="display: table;"> 
 
     <div class="row row-eq-height"> 
 
      <div class="col-md-6" style="background-color: lightblue"> 
 
       <span style="height: 100%; display: inline-block; vertical-align: middle; background-color: lightgreen">abc</span> 
 
      </div> 
 
      <div class="col-md-6" style="background-color: lightcoral"> 
 
       def<br/>ghi<br/>jkl 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Wie soll ich fix it Spanne von 100% der Höhe zu machen?

UPD: SOF "Run Snippet" zeigt Spannweite mit 100% Höhe aber nicht zentrierten Text. Frage mich, warum sich das Ergebnis von Chrome unterscheidet.

Quelle

2017-02-10 Vitaly Trifanov

geben Spanne display: block aber die Verwendung div statt, nicht wahr? – Siddharth

Verwenden Sie die folgenden Stil für Eltern div den Trick, den Text der Kinder div/span zum Zentrum:

style="display: flex;align-items: center;"

in Ihrem Code ändern Sie die folgende Zeile ein:

<div class="col-md-6" style="background-color: lightblue;">

<div class="col-md-6" style="background-color: lightblue;display: flex;align-items: center;">

Quelle

2017-02-10 17:25:19 Ayan

können Sie div statt Spanne verwenden, aber display:block Spanne geben kann

<html> 
 
<head> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <style> 
 
     .row-eq-height { 
 
      display: -webkit-box; 
 
      display: -webkit-flex; 
 
      display: -ms-flexbox; 
 
      display: flex; 
 
     } 
 
     span{ 
 
      display:block; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div style="display: table;"> 
 
     <div class="row row-eq-height"> 
 
      <div class="col-md-6" style="background-color: lightblue"> 
 
       <span style="height: 100%; display: inline-block; vertical-align: middle; background-color: lightgreen">abc</span> 
 
      </div> 
 
      <div class="col-md-6" style="background-color: lightcoral"> 
 
       def<br/>ghi<br/>jkl 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-02-10 17:20:20 Siddharth

In meinem Chrom ist :(es nicht immer noch die gleichen wie auf dem Screenshot sehen (gelöscht Cache usw. :) –

was Ihre Version? – Siddharth

neueste, 56.0.2924.87 –

Stellen Spannweite 100% der äußeren div Höhe

Antwort

Verwandte Themen