N_D_A 2023-02-12 20:41 采纳率: 84.6%
浏览 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日

悬赏问题

  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂