css - 如何根据CSS中哪个高度较大来获得两个相同高度的div

标签 css html

<分区>

我在一个容器 div 中有两个 div,我希望 img_box div 的高度与 content_con div 的高度相匹配,具体取决于它的高度。因此,如果 content_con div 有三个段落并且给 content_con 一个 303 像素的高度,让它保留;我希望 img_box div 匹配该高度。合理?我如何在 CSS 中做到这一点?

简而言之,img_box 和content_con 匹配高度取决于哪个高度大。请参阅下面的 vis:

<div class="box_container">
  <div class="img_box"></div>
  <div class="content_con"><div>
</div>


.box_container
----------------------------------------------
             |
   .img_box  |  .content_con
             |
----------------------------------------------

最佳答案

无论div中有多少数据,你都可以通过下面的方法做到这一点。但是两个 div 的高度将相等。

.box_container{display:table;width:100% }
.img_box, .content_con{display:table-cell; vertical-align:top; width:50%}
.img_box{background:red;}
.content_con{background:yellow;}

这是一个演示,看看它的外观:

http://jsbin.com/hidicoma/1/

关于css - 如何根据CSS中哪个高度较大来获得两个相同高度的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21960396/

上一篇:html - CSS 导航栏不与浏览器齐平

下一篇:html - Bootstrap 3,下拉问题

相关文章:

html - 将 div 放在页面的每个 Angular 落?

html - 如何将 html 中的日期格式从 mm-dd-yyyy 更改为 dd-mm-yyyy?

php - 使用 SimpleHTMLDOM 在 PHP 中解析 HTML iFrame SRC

javascript - 当 div 清空时,Ajax 加载的弹出图像并不总是清除

javascript - 如何将 Ajax Json 响应附加到 html?

html - 在 jquery-mobile 中,如何以编程方式添加具有所有 css 的页面元素?

php - 使用 WP_Query 显示来自 Wordpress 废墟页面 CSS 的内容,没有,内容不显示

javascript - 使父 div 的宽度等于最宽的子元素/div

javascript - 如何使行悬停覆盖数据表中的选择?

html - 如何对齐列表项使其不重叠