Home  >  Article  >  Web Front-end  >  两个子DIV float并排后,如何使这两个DIV的高度相同

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

WBOY
WBOYOriginal
2016-06-01 09:53:263108browse

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

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

<code>


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


<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>

</code>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn