DIV浮动后父DIV高度自动失效解决方案

简介: DIV浮动后父DIV高度自动失效解决方案

<div style="width:720px;margin:0 auto;background:red; overflow:hidden;">

  <div style="float:left;">

  <img  src="__ROOT__/public/images/1.png" style="width:90px;height:90px;"><br/>

  继续挑选礼品

  </div>

  <div style="float:left;margin-left:60px;">

  <img src="__ROOT__/public/images/2.png"  style="width:90px;height:90px;" ><br/>

  去购物车结算

  </div>

</div>


总结:其实很简单 只需要在父DIV中加入overflow:auto或overflow: hidden这个属性就搞定。哈哈 是不是很简单呀。


相关文章
|
7月前
|
前端开发
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
120 0
div高度设置100%无效的问题
div高度设置100%无效的问题
155 1
|
4月前
|
前端开发 JavaScript UED
如何巧妙实现element-plus中el-tree-v2的自适应横向滚动?
以上方法描述了如何使用简单的CSS和合适的HTML结构来巧妙实现在Element Plus库中 `el-tree-v2` 组件的自适应横向滚动功能。这种方法易于理解和实现,无需复杂的脚本或框架修改,只需利用CSS的强大功能即可完成。这有助于节省开发时间,同时能够提供良好的用户体验。
296 0
|
7月前
|
前端开发 JavaScript UED
使用 CSS 中的form-sizing属性实现文本区域的自动增加高度
使用 CSS 中的form-sizing属性实现文本区域的自动增加高度
134 0
layui设置textarea高度几种方式
layui设置textarea高度几种方式
375 0
|
前端开发
layui使用table组件实现排序的CSS样式调整解决方案
layui使用table组件实现排序的CSS样式调整解决方案
262 0
|
前端开发
解决鼠标经过覆盖于低层级div的高层级div,依旧会触发低层级的hover属性的问题
解决鼠标经过覆盖于低层级div的高层级div,依旧会触发低层级的hover属性的问题
249 0
解决鼠标经过覆盖于低层级div的高层级div,依旧会触发低层级的hover属性的问题
|
前端开发 JavaScript
style样式优先级问题【display:block依旧无法显示DOM元素】
style样式优先级问题【display:block依旧无法显示DOM元素】
style样式优先级问题【display:block依旧无法显示DOM元素】
|
容器
子div设置float后会导致父div无法自动撑开
注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
908 0