【问题标题】:Child div height same as sibling div Bootstrap 3?子div高度与兄弟div Bootstrap 3相同?
【发布时间】:2014-01-30 23:54:44
【问题描述】:

在 bootsrtap 3 中是否可以让子 div 与父级高度相同?

这里是例子

    <div class="row clearfix">
        <div class="col-md-6" style="background-color:red;">

 VERY LONG TEXT, JUST LONER< AND LONGER, AND LONGER, AND LONGER 
        </div>
        <div class="col-md-6" style="background-color:green;">

SHORT TXT
        </div>
    </div>

我希望右列与左列的高度相同,这很容易吗?

【问题讨论】:

标签: css twitter-bootstrap


【解决方案1】:

结果如下:http://jsfiddle.net/kaAjW/2316/

.row {overflow: hidden;}
.col-md-6 {
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    }

【讨论】:

  • 然后使用 js 或简单的 height: XXpx 为每个 div :)
  • "然后使用 js 或简单的高度:每个 div 的 XXpx" 这是简单的 css,不是作弊.. 是 css 的基础
  • 我非常喜欢这个!
【解决方案2】:

在这里你会找到答案:

get div height after div content load

您可以在下一个链接中找到一个示例:

http://fiddle.jshell.net/stryd3r/MgnT8/

【讨论】:

  • 有简单的css解决方案吗?
  • 上面的许多用户向您展示了更多 100% 应该有效的解决方案,甚至是简单的 css 解决方案,请查看我上面的评论或 Sean Keane 的回答。
【解决方案3】:

是的,只需在两个 div 上设置一个高度 style="height: 100px;"

【讨论】:

  • 如果您只设置 min-height 则不需要两个 div 相等。例如你设置 min-height:200px;但是左边的div可以有300px,右边的div可以有300px。
  • 此解决方案不适合响应式设计。
猜你喜欢
  • 1970-01-01
  • 2017-09-12
  • 1970-01-01
  • 2012-07-29
  • 2019-02-27
  • 2017-03-19
  • 1970-01-01
  • 2015-05-08
  • 1970-01-01
相关资源
最近更新 更多