HTML/CSS:使两个浮动 div 具有相同的高度 [英] HTML/CSS: Making two floating divs the same height

查看：29
本文介绍了HTML/CSS:使两个浮动 div 具有相同的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前使用 table 解决了一个小问题，见下文.基本上，我想让两个 div 占据可用宽度的 100%，但只占据所需的垂直空间(这在图片中并不是那么明显).如图所示，两者应始终具有完全相同的高度，并在它们之间留一条小线.


(来源:pici.se)

使用 table 可以很容易地做到这一点，我目前正在这样做.但是，我不太热衷于解决方案，因为从语义上讲，这实际上不是表格.

解决方案

你可以在 CSS 中通过应用大量的底部填充、相同数量的底部负边距并用具有溢出隐藏.垂直居中文本有点棘手，但这应该对您有所帮助.

#container {溢出:隐藏；宽度:100%；}#left-col {向左飘浮;宽度:50%；背景颜色:橙色；填充底部:500em；底边距:-500em；}#right-col {向左飘浮;宽度:50%；边距右:-1px；/* 谢谢 IE */左边框:1px 纯黑色；背景颜色:红色；填充底部:500em；底边距:-500em；}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><头></头><身体><div id="容器"><div id="left-col"><p>测试内容</p><p>更长</p>

<div id="right-col"><p>测试内容</p>

我认为值得一提的是，streetpc 的上一个答案包含无效的 html，文档类型是 XHTML，并且属性周围有单引号.另外值得注意的是你不需要一个额外的带有 clear 的元素来清除容器的内部浮点数.如果你使用溢出隐藏这会清除所有非 IE 浏览器中的浮点数，然后只需添加一些东西给 hasLayout，例如宽度或缩放:1 将导致 IE 清除其内部浮点数.

我已经在所有现代浏览器 FF3+ Opera9+ Chrome Safari 3+ 和 IE6/7/8 中对此进行了测试.这似乎是一个丑陋的技巧，但效果很好，我在生产中经常使用它.

我希望这会有所帮助.

I have a little peculiar problem that I currently solve using a table, see below. Basically, I want to have two divs take up 100% of the available width, but only take up as much vertical space as needed (which isn't really that obvious from the picture). The two should at all times have the exact same height with a little line between them, as shown.


(source: pici.se)

This is all very easy to do using table, which I'm currently doing. However, I'm not too keen on the solution, as semantically this is not actually a table.

解决方案

You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

I think it worth mentioning that the previous answer by streetpc has invalid html, the doctype is XHTML and there are single quotes around the attributes. Also worth noting is that you dont need an extra element with clear on in order to clear the internal floats of the container. If you use overflow hidden this clears the floats in all non-IE browsers and then just adding something to give hasLayout such as width or zoom:1 will cause IE to clear its internal floats.

I have tested this in all modern browsers FF3+ Opera9+ Chrome Safari 3+ and IE6/7/8. It may seem like an ugly trick but it works well and I use it in production a lot.

I hope this helps.

这篇关于HTML/CSS:使两个浮动 div 具有相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆