将相等高度设置为列 [英] setting equal heights to columns

问题描述

我使用twitter-bootstrap框架来创建一个包含两列的文章。

HTML

 < article> 
 
< div class ='container-fluid'> 
 
< div class =row> 
 
< div class =col-md-8 indx-imgstyle =background-image：url（'...'）;> 
< / div> 
 
< div class =col-md-4 col-md-pull-8> 
 
< div class =text-cell> 
< h1> ttitle< / h1> 
< h3>文字< / h3> 
< / div> 
 
< / div> 
 
< / div><！ -  /＃row  - > 
 
< / div><！ -  /＃post  - > 
 
< / article> 
  

我想让文章具有自适应的高度。 （％或某些），随着屏幕尺寸的减小而缩小。我需要两个列具有相同的高度（background-img需要一个高度，以显示背景图像）

我当前的css使用填充来生成响应尺寸到background-img列（ padding：16％0; ），但不会影响左列（我想让文本垂直居中在其列中）

我在文章中尝试了 height：30％; ，但它不会为列本身添加任何高度。

解决方案

Chris Coyier已经有一个很好的解决方案。我建议您查看： https://css-tricks.com/fluid-width -equal-height-columns /

来自文章的示例：

HTML

 < div id =css-table> 
< div class =col>< p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas。< / p>< / div> 
< div class =col>< p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas。前庭tort，。，。get，tempor。。。。 Donec eu libero sit amet quam egestas semper。 Aenean ultricies mi vitae est。Mauris placerat eleifend leo。< / p>< / div> 
< div class =col>< p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas。< / p>< / div> 
< div class =col>< p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas。前庭tort，。，。get，tempor。。。。 Donec eu libero sit amet quam egestas semper。 Aenean ultricies mi vitae est。Mauris placerat eleifend leo。< / p>< / div> 
< / div> 
  

CSS

 ＃css-table {
 display：table; 
} 
＃css-table .col {
 display：table-cell; 
 width：25％; 
 padding：10px; 
} 
＃css-table .col：nth-​​child（even）{
 background：#ccc; 
} 
＃css-table .col：nth-​​child（odd）{
 background：#eee; 
} 
  

I am using twitter-bootstrap framework to create an 'article' with two columns. text on one side, and a column with a background image on the right.

HTML

<article>

 <div class='container-fluid'>

  <div class="row">

    <div class="col-md-8 indx-img" style="background-image:url('...');">
    </div>

    <div class="col-md-4 col-md-pull-8">

      <div class="text-cell">
        <h1>ttitle</h1>
        <h3>text</h3>
      </div>

    </div>

    </div><!-- /#row -->

  </div><!-- /#post -->

</article>

I want the article to have a responsive height. (a % or something) that shrinks as the screen size decreases. I need both columns to have the same height (the background-img one needs a height in order to display the background image)

My current css uses padding to generate a responsive size to the background-img column (padding: 16% 0;), but doesn't affect the left column ( I want the text vertically centered in its column)

I tried height: 30%; on article, but it does't add any height to the columns themselves.

解决方案

Chris Coyier has a good solution for this already. I recommend reviewing this: https://css-tricks.com/fluid-width-equal-height-columns/

Example from article:

HTML

<div id="css-table">
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
</div>

CSS

#css-table {
  display: table;
}
#css-table .col {
  display: table-cell;
  width: 25%;
  padding: 10px;
}
#css-table .col:nth-child(even) {
  background: #ccc;
}
#css-table .col:nth-child(odd) {
  background: #eee;
}

这篇关于将相等高度设置为列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！