N_D_A 2023-02-12 20:41 采纳率: 80%
浏览 15
已结题

关于前端页面父元素容器自适应问题

父元素(div盒子)在子元素存在float浮动的情况下,如何做到父元素容器自适应?

  • 写回答

1条回答 默认 最新

  • GISer Liu 2023-02-12 21:03
    关注

    以下答案引用自GPT-3大模型,请合理使用:

    。
    
    这个问题比较复杂。先来看一个简单的例子:
    
    HTML
    
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自适应容器</title> </head> <body> <div class="container"> <div class="inner">Hello world!</div> </div> </body> </html>
    
    CSS
    
    .container { width: 100%; height: 100px; } .inner { width: 50%; height: 50px; margin: 10px auto; text-align: center; }
    
    这个HTML代码的效果如下图所示:
    
    
    
    图1
    
    在浏览器中调整宽度和高度,可以看到.inner盒子会自适应,而.container容器则不会发生变化。
    
    针对上面的例子,如果.inner盒子有float:left;属性,效果就会变成如下图所示:
    
    
    
    图2
    
    由于.inner盒子有float:left;属性,它会把父元素容器.container排到右侧,而不是像图1的效果那样是放在容器的正中部。
    
    为了让.container容器也能自适应,可以通过下面的CSS代码解决这个问题:
    
    .container { width: 100%; height: 100px; } .inner { width: 50%; height: 50px; margin: 10px auto; text-align: center; float: left; }
    
    这样.container容器就能够适应.inner盒子的float:left;属性,图2的效果就会变成如下图所示:
    
    
    
    图3
    
    注意:如果.inner盒子没有float:left;属性,那么.container容器就不会有变化。
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 2月20日
  • 已采纳回答 2月12日
  • 创建了问题 2月12日

悬赏问题

  • ¥15 为什么shp文件会有这种小方块?
  • ¥15 ecplise在连接数据库时显示加载驱动成功但是数据库连接失败
  • ¥15 visionmaster启动失败,提示为“机器不满足授权而被禁用”
  • ¥50 用logisim设计16位单时钟周期cpu
  • ¥15 IDEA中圈复杂度如何具体设置
  • ¥50 labview采集不了数据
  • ¥15 Multisim红外倒车雷达仿真中距离问题
  • ¥15 请上面代码做什么处理或什么混淆
  • ¥15 英雄联盟自定义房间置顶
  • ¥15 W5500网线插上无反应