html - float 元素在不同的屏幕分辨率下消失

标签 html css

页面设置为 100% 流动宽度时出现一个奇怪的问题,其中包含 float 目录类别部分和标题。

http://www.inside-guides.co.uk/brentwood/business-directory/index.html

问题是当屏幕分辨率低于例如1024px(或者当更大的窗口例如 1280px 最小化超过特定分辨率时),类别标题会消失到下一级,我不知道为什么。

如果您访问目录页面并将窗口最小化到 1024 像素,您将看到标题下拉,顶部类别没有标题。帮助将不胜感激!

这是 CSS:

/* Business Dir */
.bus-dir {clear:left;}
.bus-dir .logo {padding-top:3px;line-height:0;float:left;width:40px;height:70px;overflow:hidden;}
.bus-dir h2 a {width:90%;color:#242672;line-height:1.25;font-size:19px;float:left;}
.bus-dir p{margin:0}
.bus-dir .subcats {float:none;padding-bottom:20px;line-height:1.5;font-size:15px;}
#dir-left {float:left;width:47%;margin:0 2.3% 0 0.7%;}
#dir-right {float:left;width:48%;}
.bus_dir p, .bus_dir a {margin:1.5em 0 2em;clear:both;}

最佳答案

您需要删除 .bus-dir h2 a 上的 float: left

关于html - float 元素在不同的屏幕分辨率下消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8092726/

相关文章:

html - 在特定断点处配置 .container max-width - Tailwindcss

css - 鼠标悬停时切换图标

javascript - CSS 未加载到动态生成的 Laravel View 中

javascript - 使用javascript更改图像的src

html - 一些但不是所有的自定义 CSS 覆盖了 Bootstrap 4 设置

html - 我如何使用 flexbox 编写此布局?

php - 添加按价格排序和按名称排序

javascript - 如何让按钮每次按下时都会创建不同的文本?

php - 使用 PHP 从 PHP 文件中仅获取 HTML 代码?

javascript - 获取以像素为单位的返回数据表的大小