如何让一个div的高度围绕着它的浮动的孩子。[英] How to fit a div's height to wrap around its floated children

本文是小编为大家收集整理的关于如何让一个div的高度围绕着它的浮动的孩子。的处理方法,想解了如何让一个div的高度围绕着它的浮动的孩子。的问题怎么解决?如何让一个div的高度围绕着它的浮动的孩子。问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我有一个围绕两个孩子包裹的Div,一个左漂浮在左侧,另一个则右转.我想在孩子们周围放一个边界和背景,但是Div的身高为0,因为它不能调整大小以适合孩子.

这是行动中的一个示例: http://jsfiddle.net/vvz7j/17/17/

我希望红色背景一直向下走.我尝试了高度:自动,但这没用.

所有的帮助将不胜感激.

P.S.如果可能的话,我不想使用任何JavaScript.

推荐答案

这是使用浮子时的常见问题.有几种常见的解决方案,我以个人喜好订购(最佳方法):

  1. 使用:: CSS伪元素之后.这被称为" clearfix",并起作用IE8及以上.如果您需要与IE的早期版本的兼容性,则此答案应该有所帮助. 示例.

    .parentelement::after {
        content: "";
        display: table;
        clear: both;
    }
    
  2. 使用CSS属性overflow: auto或overflow: hidden将两个浮子添加到一个容器中.但是,此方法可能会导致问题(例如,当工具提示重叠时,将出现卷轴的父元素边缘). 示例.

    <div style="overflow: auto">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  3. 向父元素添加设置高度. 示例.

    <div style="height: 200px">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  4. 使父元素成为浮点. 示例.

    <div style="float: left">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  5. 用clear: both浮动后添加一个div. 示例.

    <div style="float: left"></div>
    <div style="float: left"></div>
    <div style="clear: both"></div>
    

其他推荐答案

添加overflow: hidden;到#wrap.这是clear fix.这是一些有关它的文档: http://positioniseverything.net/easyclearing.htmlearing.html

le:您还可以通过多种方法来实现这一目标,具体取决于浏览器的兼容性:

  1. 添加溢出:隐藏在父容器中.

#wrap { overflow: hidden; }

  1. 使用伪元素添加clear: both.

#wrap:after { clear: both; content: ""; display: table;}

  1. 最常用的tehnique是添加额外作为父容器的最后一个元素.

<div style="clear:both"></div>

i preffer not在获得额外的html标记时使用第三个.

其他推荐答案

尝试将overflow: hidden添加到您的#wrap div.

本文地址:https://www.itbaoku.cn/post/565692.html