关于浮动宽度不够掉盒子的问题解决方法

　　我想很多初学css的同学都会遇到这么一个问题，就是给定父盒子宽度之后，子盒子浮动，父盒子宽度不够之后，就会形成所谓的掉盒子。那么今天我就给广大初学者一个解决办法，老司机勿喷，仅供新手参考。

这就是所谓的掉盒子，因为四个盒子的宽度加起来超过了父盒子的宽度，所以浮动后，在正常情况下，会排列在第二行。那么我们如何让第四个盒子排列在第一行上呢？

解决方法就是要想办法让父盒子的宽度可以容纳下四个盒子，当然我们不会去修改父盒子的宽度。我们要做的就是再给子盒子加一个额外的父盒子，这个父盒子只需要有一个宽度的属性就够了

基本模型就是这样的，红色边框的盒子（红色是我画上去的，事实上是不会显示出来的，因为只给了红色边框盒子一个宽度属性）只给他一个宽度

那么有的同学能能会问了。超出的部分怎么办啊？

我们可以给父盒子设置一个overflow：hidden；属性，把超出的部分隐藏了。

这样就解决了掉盒子的问题，JD的每日推荐的模块就是用的这个办法做的

时间： 2024-08-09 19:52:55

关于浮动宽度不够掉盒子的问题解决方法的相关文章

笔记-[js兼容]-滚动条的滚动距离的兼容性问题解决方法。

在我们操作JS实现些效果的时候,可能会涉及到滚动条滚动距离的问题; 在IE和非IE下是存在兼容性问题的在IE下支持:document.body.scrollTop(scrollLeft);//在ie下获取滚动条距离的属性在非IE下支持:document.documentElement.scrollTop(scrollLeft);//在非ie下获取滚动条距离的属性代码兼容: var scrollTop;//定义一个变量名为scrollTop为滚动条的距离滚动高度 : var scroll

80端口被占用问题解决方法汇集

电脑N久没有换系统了卡的像狗一样,不忍久重新装了系统,像往常一样,装各种软件然后配置各种环境,正常开工.可是在运行Tomcat的时候才发现80端口被占用,找了很多方法未解决,最后还是解决掉了,这就把我试过的所有方法汇集在一块,做个备份. 1.第一反应,通过CMD的命令查找被占用的端口的PID,通过PID查找出具体的进程,最后通过KILL干掉即可.这里面用到的命令包括 >netstat -ano|findstr "80"(查看端口被占用的进程ID) >tasklist|fin

空格&nbsp在不同浏览器中显示距离不一致问题解决方法

在ie.firefox.chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同. 网上资料说不同的浏览器会有不同的默认字体,一般 IE默认字体都是宋体,而firefox和chrome的默认字体是Times New Roman,宋体是字符等宽的字体,但Times New Roman不是字符等宽的字体,因为浏览器默认字体的不同,空格符在不同的浏览器下面的显示宽度也不同. 例如以下代码分别以IE和chrome进行测试 [html] view plaincopy <table> &l

关于iOS 'The sandbox is not sync with the Podfile.lock'问题解决方法

问题描述: github下载的Demo,很多时候使用到CocoaPods,有的时候因为依赖关系或者版本问题不能编译运行.出现例如The sandbox is not sync with the Podfile.lock问题时候,如下所示 diff: /../Podfile.lock: No such file or directory diff: Manifest.lock: No such file or directory error: The sandbox is not in sync

dede织梦data目录正确迁移及引起的问题解决方法

关于将dede织梦data目录迁移出web目录织梦官方提供了一个教程,但是如果你是按照他们提供的教程做的话会出现很多问题.比如验证码问题, 图片显示问题等等一大堆.织梦官方这种是很不负责任的,因为那个教程有很大缺陷.这里跟大家提供一个完整版本的如何将dede织梦data目录正确迁移, 以及按照官方版本教程迁移出现问题的解决办法.这里先看看官方的吧,然后我再补充. 1.将data目录转移到非Web目录我们这里举例“D:\dedecms\v57”为我们系统的根目录,我们需要将目录下的data文件夹

嵌入式开发常见问题解决方法

嵌入式开发常见问题解决方法一.问题复现稳定复现问题才能正确的对问题进行定位.解决以及验证.一般来说,越容易复现的问题越容易解决. 1.1 模拟复现条件有的问题存在于特定的条件下,只需要模拟出现问题的条件即可复现.对于依赖外部输入的条件,如果条件比较复杂难以模拟可以考虑程序里预设直接进入对应状态. 1.2 提高相关任务执行频率例如某个任务长时间运行才出现异常则可以提高该任务的执行频率. 1.3 增大测试样本量程序长时间运行后出现异常,问题难以复现,可以搭建测试环境多套设备同时进行测试.

nginx、Apache、IIS中413 Request Entity Too Large问题解决方法

分享下nginx.Apache.IIS三种服务器解决413 Request Entity Too Large问题的方法. 一.nginx服务器 nginx出现这个问题的原因是请求实体太长了.一般出现种情况是Post请求时Body内容Post的数据太大了,如上传大文件过大.POST数据比较多. 处理方法在nginx.conf增加 client_max_body_size的相关设置, 这个值默认是1m,可以增加到8m以增加提高文件大小限制:当然可以设置的更大点.# 在http,server或者loc

zabbix中文乱码问题解决方法（Zabbix 2.2.3）

我把zabbix安装完成后,调整为中文界面,出现乱码. 原因:因为没有中文字体,没有设置显示字体为中文. 解决方法(网络整理收集): 1.获取一个字体文件,上传至zabbixServer的web目录fonts文件夹(/data/www/zabbix/fonts), Windows → 控制面板 → 字体命名为小写字母 2.修改配置文件,/www/zabbix/include/defines.inc.php //define('ZBX_FONT_NAME', 'DejaVuSans'); def

Failed to read schema document 'http://code.alibabatech.com/schema/dubbo/dubbo.xsd'问题解决方法

或者报错: org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException: nested exception is org.xml.sax.SAXParseException: cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element 'context:annotation-c