爲2格設置相等的高度

-1

我使用引導程序，我想創建2個div。爲2格設置相等的高度

1 - 含量的div（信息截面） 2 - 分度backgroung圖像（封面塊）

但是我有問題。我不能設置height1 = height2。我的代碼：

<div class="cover-section"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-6 info-section"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
      </div> 
      <div class="col-md-6 cover-block"></div> 
     </div> 
    </div> 
</div>

的CSS：

.info-section { 
background-color: red; 
padding: 100px 40px; 
border: none; 
} 

.cover-block { 
background: url(../images/2.jpg) center no-repeat; 
background-size: cover; 
height: 500px; 
}

我嘗試使用

.cover-block{ 
    height:100%; 
}

，但它不工作

來源

2017-03-03 Pravayest Pravayest

Twitter的引導沒有提供所要求的行爲。但可以通過JavaScript/jQuery或[flex-box]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）（我的偏好）來實現 - 或者如果你需要使用'display：table;'支持更低的IE版本，這當然不是一個很好的解決方案。 ** PS：**'身高：100％;'只適用於父母有設定身高的情況。 – AlexG

試試這個它使用Flexbox的。

檢查片段

.row-eq-height { 
 
    display: flex; 
 
} 
 
.info-section { 
 
background-color: red; 
 
} 
 
.cover-block { 
 
background-color: yellow; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 

 
<div class="cover-section"> 
 
    <div class="container-fluid"> 
 
     <div class="row row-eq-height"> 
 
      <div class="col-xs-6 col-md-6 info-section" > 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
      </div> 
 
      <div class="col-xs-6 col-md-6 cover-block"></div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-03-03 15:02:05 neophyte

新手，通過使用html，css和js的單獨字段，可以大大提高片段的質量。此外，左側還有一個外部庫的字段。 – Christoph

是的，謝謝 – neophyte

@Christoph：done..thanks提及它。 – neophyte

爲2格設置相等的高度

回答

相關問題