为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格设置相等的高度

回答

相关问题