两个子DIV float并排后,如何使这两个DIV的高度相同

两个个子DIV的内容高度不同,当对他们设置float:left的时候,就会出现版面效果的问题(DIV高度不一致)。那么,如何让这两子DIV的高度一致呢。

两个个子DIV的内容高度不同,当对他们设置float:left的时候,就会出现版面效果的问题(DIV高度不一致)。那么,如何让这两子DIV的高度一致呢(即:如何让内容DIV的高度能自动适合容器DIV的高度)。我们可以利用css的margin-bottom:-9999px和padding-bottom:9999px来解决这个问题。

将父容器的overflow设置为hidden,再将内容少的div设置margin-bottom:-9999px和padding-bottom:9999px;
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<title>两个子DIV float并排后,如何使这两个DIV的高度相同</title>
</head>
<body>
<div style="width:605px;overflow:hidden;">
  <div style="float:left;width:300px; background:#EFEFEF;margin-right:5px;margin-bottom:-9999px;padding-bottom:9999px;">
  内容少
  </div>
  <div style="float:left;width:300px;background:#F7F7F7;">
  内容多<br/>
  内容多<br/>
  内容多<br/>
  内容多<br/>
  内容多<br/>
  内容多<br/>
  内容多<br/>
  内容多<br/>
  内容多<br/>
  </div>
  <div style="clear:both;"></div>
</div>
</body>
</html>
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

在网站开发中,css float是一个经常需要使用的css属性,改属性用于设置css块级元素的浮动方向(左右浮动)。本文章向码农介绍css float使用方法和实例应用,需要的码农可以参考一下。
height属性设置元素的高度。注意: height属性不包括填充,边框,或页边距!本文章向码农介绍CSS 高度height 的使用方法和基本实例,需要的css码农可以参考一下。
本文章向码农介绍CSS实现div水平垂直居中的五种方法,分别是css vertical方法,css Flexbox方法,css transform与绝对定位方式,css vertical-align方法,display:inline-block方法。需要的码农可以参考一下本文章。
css如何将div实现全屏水平垂直居中,本章节介绍一下如何将一个div元素在整个网页内实现水平垂直居中效果,代码是最有说服力的,直接看代码。
在布局一个网页时,非常重要的是一般网页主体布局都是水平居中的,其实就是对最外的DIV层设置居中布局,这时布局居中就是我们这里要介绍关键点。
css居中包括两个方面,一个是html元素居中,比如div盒子居中。另一个是html元素内容居中,比如一个div盒子里面有一些文字,设置这些文本在div中居中显示。本文章向码农介绍这两只居中改如何实现以及实现的具体css代码。