[分享]css内部div同高外部div

HTML和CSS的设计目的是让网站开发者可以自由地表现页面上任何元素，但是在制作网页时，我们常常遭遇到内部DIV和外部DIV高度不一致的问题。这时候，我们就需要使用一些技巧来解决这个问题。首先，我们需...

HTML和CSS的设计目的是让网站开发者可以自由地表现页面上任何元素，但是在制作网页时，我们常常遭遇到内部DIV和外部DIV高度不一致的问题。这时候，我们就需要使用一些技巧来解决这个问题。
首先，我们需要设置外部DIV的高度为auto。这样就可以根据内部DIV的高度自动调节外部DIV的高度。接着，对于内部DIV，我们需要设置其为float:left，并给它设置一个margin-right属性。这样就可以让内部DIV在左边浮动，并且和右边的DIV留下一定的间距。
然而，如果直接这么做，我们会发现内部DIV的高度大于外部DIV的高度。这是因为内部DIV的浮动会导致外部DIV的高度无法撑开。为了解决这个问题，我们需要增加一个清除浮动的元素来解决它。
下面是实现这个效果的CSS代码，我们可以使用 pre 标签来展示代码部分：

 /* 外部DIV */
    .container {
        height: auto;
    }
 
    /* 内部DIV */
    .inner {
        float: left;
        margin-right: 20px;
        height: 100%;
    }
 
    /* 清除浮动 */
    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    } 

最后，我们需要在HTML中适当的位置加入clearfix元素，来清除内部DIV的浮动。这样就可以确保外部DIV和内部DIV具有相同的高度了。
以上就是关于CSS内部DIV同高外部DIV的解决方案。通过这种方法，我们可以使网站中的元素更加和谐美观，增强用户的浏览体验。