Question

我正在使用twitter-bootstrap框架创建一篇文章＆＃39;有两列。一边是文字，右边是一张背景图片。

HTML

$totaldist = "SELECT count(DISTINCT) state_Name FROM area_info GROUP BY state_Name";

我希望文章具有响应高度。（a ％或者什么）随着屏幕尺寸的减小而缩小。我需要两个列具有相同的高度（background-img需要一个高度才能显示背景图像）

我当前的css使用填充为background-img列生成响应大小（填充：16％0; ），但不会影响左列（我想要文本垂直居中于其列）

我在文章上尝试了高度：30％; ，但它没有为列本身添加任何高度。

Answer 1

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. 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;
}

将相同的高度设置为列

1 个答案: