使跨度高度達到外部div高度的100％

下面是簡單的html。目的是使左跨度高度達到外部div高度的100％，並且垂直居中文本（即「abc」應該與「ghi」成爲一行）。截圖結果（chrome，win10）：樣式不起作用。使跨度高度達到外部div高度的100％

「row-eq-height」用於製作高度相同的列，並從here複製而來。

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

我應該如何解決這個問題，使高度的區間100％？

UPD： SOF的「運行代碼段」顯示跨度爲100％高度但未居中文本。想知道爲什麼結果與鉻不同。

來源

2017-02-10 Vitaly Trifanov

給予跨度顯示：塊，但div的使用，而不是，不是嗎？ – Siddharth

使用下面的風格父DIV居中的孩子DIV/SPAN的文字：

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

在你的代碼，更改以下行：

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

到

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

來源

2017-02-10 17:25:19 Ayan

可以使用div來代替跨度，但給人跨度display:block可以做的伎倆

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

來源

2017-02-10 17:20:20 Siddharth

在我的Chrome中沒有:( 仍然看到相同的截圖（清除緩存等:) :) –

什麼是你的版本？ – Siddharth

最新，56.0.2924.87 –

使跨度高度達到外部div高度的100％

回答

相關問題