解决：当浏览器窗口缩小时，文本内容被“挤”下来的问题

已于 2022-11-04 21:08:05 修改
阅读量2.7k 收藏 2
点赞数
文章标签： html css 前端
于 2022-11-04 21:05:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y1059477028/article/details/127695709
版权

目录

一、问题分析及解决办法

 二、重点总结

 三、完整代码

四、最终效果

一、问题分析及解决办法

  

问题产生原因：在编写代码时没有给包裹文本的父盒子设置宽度，导致当浏览器页面缩小到一定程度时（即父盒子宽度缩小到一定程度），文本内容因为父盒子宽度不够而被挤到下一行排列显示。

解决办法：给包裹文本的父盒子设置宽度（即网页版心宽度）。

 二、重点总结

 1、头部如何布局

第一步 设置头部版心宽度；

第二步 将头部分成两个部分，一个左浮动和另一个右浮动。

2、版心横幅、登录区如何布局？

先给横幅（绿色线）设置宽度（版心宽度）和高度，然后设置横幅背景图片；

最后，给登录模块（蓝色线）设置右浮动 即可贴在版心右侧。

 三、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .w {
            width: 990px;
            margin: 0 auto;
        }

        header {
            height: 80px;
        }

        header li:first-of-type {
            float: left;
        }

        header li:last-of-type {
            float: right;
        }

        h1 {
            float: left;
            margin-top: 10px;
        }

        header p {
            float: left;
            margin: 30px 0 0 20px;
        }

        a>i {
            display: inline-block;
            vertical-align: middle;
            width: 18px;
            height: 14px;
            background: url(./images/q-icon.png) no-repeat;
            margin-right: -1px;
        }

        header li:last-of-type a {
            position: relative;
            top: 48px;
            color: #999;
            font-size: 12px;
            font-family: "\5b8b\4f53";
        }

        header li>a:hover {
            color: #E4393C;
            text-decoration: underline;
        }

        /* 主体区 */
        main>section {
            height: 39px;
            line-height: 39px;
            background-color: #FFF8F0;
        }

        main>section>p {
            font-size: 12px;
            color: #999;
            text-align: center;
            font-family: "\5b8b\4f53";
        }

        .iconfont {
            vertical-align: middle;
            font-size: 23px;
        }

        main>p>a {
            color: #333;
        }

        main>section>p>a:hover {
            color: #333;
        }

        /* 中间红色区 */
        main>div {
            height: 475px;
            background-color: #e93854;
        }

        .banner {
            height: 475px;
            background: url(./images/background.png) no-repeat;
        }

        .banner>article {
            float: right;
            width: 346px;
            margin-top: 10px;
            background-color: white;
        }

        article>p {
            height: 39px;
            line-height: 39px;
            color: #999;
            font-size: 12px;
            text-align: center;
            font-family: "\5b8b\4f53";
            background-color: #FFF8F0;
        }

        article>ul {
            height: 54px;
            line-height: 54px;
            border-bottom: 1px solid #F4F4F4;
        }

        article ul>li {
            float: left;
        }

        article ul>li>a {
            display: inline-block;
            width: 172px;
            font-size: 18px;
            line-height: 18px;
            text-align: center;
        }

        article ul>li:first-child>a {
            border-right: 1px solid #F4F4F4;
            color: #666666;
        }

        article ul>li:last-child>a {
            color: #e4393c;
            font-weight: 700;
        }

        article ul>li>a:hover {
            text-decoration: none;
            color: #E4393C;
            font-weight: 700;
        }

        /* 表单form */
        #loginname,
        #pwd {
            width: 267px;
            height: 40px;
            box-sizing: border-box;
            border: 1px solid #BBBBBB;
            outline: none;
            text-indent: 12px;
        }

        form p>label>span {
            display: inline-block;
            vertical-align: middle;
            width: 40px;
            height: 40px;
            background-color: red;
            box-sizing: border-box;
            border: 1px solid #BBBBBB;
            margin-right: -6px;
        }

        form p:first-child {
            margin: 33px 0 20px 20px;
        }

        form p:first-child>label>span {
            background: url(./images/pwd-icons-new.png) no-repeat;
        }

        form p:nth-child(2) {
            margin-left: 20px;
        }

        form p:nth-child(2)>label>span {
            background: url(./images/pwd-icons-new.png) no-repeat -48px 0;
        }

        form p:nth-child(3)>a {
            float: right;
            font-size: 12px;
            color: #666666;
            margin: 20px 21px 21px 0;
        }

        form p:nth-child(3)>a:hover {
            color: #E4393C;
            text-decoration: underline;
        }

        /* 红色长条“登录” */
        form p:nth-child(4)>a {
            display: inline-block;
            width: 305px;
            height: 30px;
            line-height: 30px;
            margin: 0 0 31px 21px;
            text-align: center;
            border: 2px solid #e85356;
            background-color: #e4393c;
            font-size: 20px;
            color: white;
        }

        form p:nth-child(4)>a:active {
            border: 2px solid #4D90FE;
        }

        form p:nth-child(4)>a:hover {
            text-decoration: none;
        }

        /* qq 微信 */
        section {
            height: 50px;
            line-height: 50px;
            border-top: 1px solid #F4F4F4;
        }

        section a {
            font-size: 12px;
            color: #666666;
        }

        section>a:first-child>i {
            width: 19px;
            height: 18px;
            background: url(./images/QQ-weixin.png);
            margin: -4px 2px 0 21px;
        }

        /* qq、微信中间竖线 */
        section>.line {
            color: #ccc;
            font-size: 12px;
            padding: 0 6px;
        }

        section>a:nth-of-type(2)>i {
            margin: -4px 2px 0 0;
            width: 19px;
            height: 18px;
            background: url(./images/QQ-weixin.png) no-repeat -19px 0;
        }

        section>a:nth-of-type(3) {
            float: right;
            margin-right: 21px;
            font-size: 14px;
            color: #B61D1D;
        }

        section>a:nth-of-type(3)>i {
            width: 16px;
            height: 16px;
            background: url(./images/pwd-icons-new.png) no-repeat -104px -75px;
            margin-top: -4px;
        }

        /* 底部 */
        footer>div {
            font-size: 12px;
            color: #666;
            text-align: center;
        }

        .links {
            margin: 21px 0 14px 0;
        }

        .links>a {
            margin: 0 9px;
            color: #666666;
        }

        a:hover {
            color: #E4393C;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <header class="w">
        <ul>
            <li>
                <a href="#">
                    <h1>
                        <img src="./images/logo-201305-b.png" alt="logo">
                    </h1>
                </a>
                <p>
                    <img src="./images/wecome-icon.png" alt="欢迎登录">
                </p>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    登录页面，调查问卷
                </a>
            </li>
        </ul>
    </header>
    <main>
        <section>
            <p class="w">
                <span class="iconfont s1">&#xe8e5;</span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证! 新版<a
                    href="#">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。
            </p>
        </section>
        <div>
            <div class="banner w">
                <!-- 中间浅色区域 -->
                <article>
                    <p><span class="iconfont">&#xe8e5;</span>京东不会以任何理由要求您转账汇款,谨防诈骗。</p>
                    <ul>
                        <li><a href="#">扫码登录</a></li>
                        <li><a href="#">账户登录</a></li>
                    </ul>
                    <form action="qn.java" method="post">
                        <p>
                            <!-- 输入用户名 -->
                            <label for="loginname"><span></span></label>
                            <input type="text" name="loginname" id="loginname" placeholder="邮箱/账号名/登录手机">
                        </p>
                        <p>
                            <!-- 输入密码 -->
                            <label for="pwd"><span></span></label>
                            <input type="password" name="pwd" id="pwd" placeholder="密码">
                        </p>
                        <p><a href="#">忘记密码</a></p>
                        <p><a href="#">登&nbsp;&nbsp;&nbsp;&nbsp; 录</a></p>
                    </form>
                    <!-- qq 微信 -->
                    <section>
                        <a href="#">
                            <i></i>
                            QQ</a>
                        <span class="line">|</span>
                        <a href="#">
                            <i></i>
                            微信</a>
                        <a href="#">
                            <i></i>
                            立即注册</a>
                    </section>
                </article>

            </div>
        </div>
    </main>
    <footer class="w">
        <div class="links">
            <a href="#">关于我们</a>|
            <a href="#">联系我们</a>|
            <a href="#">人才招聘</a>|
            <a href="#">商家入驻</a>|
            <a href="#">广告服务</a>|
            <a href="#">手机京东</a>|
            <a href="#">友情链接</a>|
            <a href="#">销售联盟</a>|
            <a href="#">京东社区</a>|
            <a href="#">京东公益</a>|
            <a href="#">关于我们</a>|
            <a href="#">English Site</a>
        </div>
        <div class="copyright">
            Copyright © 2004-2022&nbsp;&nbsp;京东JD.com&nbsp;版权所有
        </div>
    </footer>
</body>

</html>

四、最终效果

忘不了情
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-resize-text：vue指令，可根据元素宽度自动调整字体大小
02-05
Vue调整文字大小 Vue指令可根据元素宽度自动调整字体大小。 它使字体大小在灵活或响应式布局上具有灵活性。 ：调整浏览器视口的大小以查看实际效果 安装 通过NPM安装 $ npm install vue-resize-text --save 通过CDN安装 < script src =" https://unpkg.com/vue " > </ script > < script src =" https://unpkg.com/vue-resize-text " > </ script > 全球 全局注册VueResizeText： import Vue from 'Vue' ;
html页面缩小后文字乱怎么,html 文字乱码怎么办啊？
weixin_36300623的博客
06-03 706
回答： 尊敬的用户您好：一、文档格式法这种方法是将损坏的Word文档转换为另一种格式，然后再将它转换回Word文档格式。这是最简单和最彻底的文档恢复方法。所以如果遇到显示混乱的情况，推荐首先使用这种方法。步骤如下：1.在Word中打开损坏的文档，选择“文件→另存为”，在“保存类型”列表中，选择“RTF格式(?.rtf)”，然后单击“保存”按钮。2.关闭损坏的文档，打开刚才保存的RTF文件，选择“文...
dev怎么自动排版_你不知道的Sketch黑科技-智能排版
weixin_39882394的博客
11-23 186
前言认识一个主攻前端的全栈开发大牛，最近做一个项目需要用到Sketch，前天跟我发牢骚说：你之前不是说Sketch就跟web开发一样简单吗？但是我感觉和PS一样又笨又呆，做按钮、列表、段落的时候太死板，删个元素还得把其他元素一个个调整，就不能像web的float浮动一样自己动吗？我立即明白他的意思，推荐他使用了Kitchen插件。结果第二天泪流满面地跟我说：Sketch这玩意儿太TM好用了。其实很...
CSS学习笔记--导航栏元素由于页面缩小而被挤到下一行的解决方法
zhouzehua_125的博客
12-07 5519
这个问题之前也遇到过，这次是在写一个vue项目中的头部组件发现的，最外层div给设置了width100%，头部布局是分左中右三部分，直接用的浮动布局，因此当我缩小屏幕宽度的时候，中间导航栏就被挤到下面，因为缩小后的宽度不够了， 如图所示： 可以看到我的导航栏已经被挤到下面。 原因上面已经提过，就是宽度不够的问题，所以这时候我们只需要给头部组件最外的div设置一个最小宽度，我这里是设置...
MMRA：使中型再次可读—浏览器扩展
01-29
， 和，使媒体再次可读，可改善由于用户参与策略而破坏的阅读体验。 媒介实际上只可读过一次； 此扩展旨在帮助人们再次注意作者的话，而不是Medium的UX。 通过以下方式提高可读性 防止顶部导航栏停留 完全隐藏底部的“获取更新”栏 缩小大量标题图片 隐藏“帖子计量器”栏和“升级”标题按钮 在手机上隐藏“在应用程序中打开”按钮 阻止“原谅打扰”弹出窗口 （可选）隐藏拍手/共享栏 （可选）预先加载所有帖子图像，而不是在滚动时延迟加载 （可选）禁用选择文本时出现的弹出菜单 预习 不可读的介质 使介质再次可读 贡献 想要改善吗？ 请做！ 发送拉取请求或提出问题！ 执照 麻省理工学院 学分 我是Matt Baer，对烦人的用户敌对软件感到厌倦。 受此启发，以及Medium更具可读性的时代，我建立了一个称为的书写平台，，并注释，拍手和 ，它会。 当您只需要表达自己的想法时，它是完美的选择-如果您想分享，则可以始终跨发布到Medium。 关于扩展许可的免责声明 此扩展名要求访问所有网站，以使具有不同于域名的出版物上的中型文章也可读。 有关 其他使互联网不那么烦人的扩展：
html浏览器进行缩放百分比 界面和文字保持不变
weixin_45441173的博客
02-17 3682
html浏览器进行缩放百分比 界面和文字保持不变
解决浏览器缩放时导致的页面布局的变化
热门推荐
youngeffort的博客
07-24 2万+
现象： 正常展示： 缩放展示： 原因： 在网页中，如果一个元素没有设置最小宽度(min-width)，这时当浏览器缩小到一定程度时，元素中的布局可能会发生变化。 缩放实际是改变了盒模型的宽度和高度。 解决： 1、如果想要保持布局不变，可以给该元素（如div)设置最小宽度属性 2、给网页设置固定宽，即最外层父元素 ...
解决HTML缩小窗口页面内容排版全部打乱问题
qq_52622178的博客
08-10 2万+
【方法一】 下图缩小窗口排版全乱 给body 加上这两行代码，让上下外边距为0，左右两个外边距自动相等，和方法二结果相同，给隐藏的部分加上导航条。 width: 1200px; margin: 0 auto; 加上这两句结果如下图所示： 【方法二】 如下图所示，缩小窗口，页面布局全部打乱 在body的css中加上这两句话，当窗口最小宽度min-width <1200px 时，会生成导航条将内容隐藏，但是页面的排版布局不会乱 width: 100%; min-width: 1200px;
html float图片和文字不重叠,html 解决图片文字并排显示
weixin_39797264的博客
05-31 2275
最新解决方法常用情况：显示图片：解决方法：1 2 3 设置成功，请牢记新的登陆密码4 显示图片：解决思路：1.利用inline的vertical-align:middle属性(注意：这个属性只对inline和inline-block有效，对block无效)2.后面的文字用inline元素包装起来，否则还是会错位情况1：1 2 3 4 设置成功...
HTML+CSS基础
yanhhillo的博客
02-28 180
2022.2.28 学习笔记 目录 CSS第二趴： 四、 CSS的背景 CSS第三趴： 一、CSS三大特性 1.层叠性 2.继承性 3. 优先级 CSS第四趴： 一、CSS盒子模型 1.盒子模型（Box Model）组成 2. 边框（border） 3.内边距（padding） 4. 外边距（margin) 5.外边距典型应用： 6.外边距合并 7.清除内外边距 二、圆角边框(重点) 三、盒子阴影(重点) 四、文字阴影(了解) CSS第五趴： 一、CSS浮动 .
front-end-exercise:前端编程练习
05-05
前端锻炼 尝试调整浏览器窗口的大小以测试响应式布局。 该应用程序从获取并渲染一些模拟数据。 使用将图像渲染为流畅的布局。 设计选择： 在单个页面中显示所有图像。 将图像缩小到最大宽度。 由于图像的高度各不相同，因此砌体负责流体/响应式布局。 我尝试使用来加快页面加载速度，但最终与Masonry的配合效果不佳。 另外，在Safari中加载图片的速度比在Chrome中加载慢得多，但是我没有机会对其进行调试。 组件 -顶级组件，负责调用端点并显示消息 负责使用砌体布置Post组件 -将渲染为预加载的图像+文本 预加载图像的组件，并在预加载图像时显示微调。 建造 这些命令将使用自动刷新在上启动本地Web。 npm install gulp
jquery 弹出窗口，可缩放，可拖拽
03-21
artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。 完善的接口 它的接口完善，可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。 细致的体验 如果不是在输入状态，它支持Esc快捷键关闭；可指定在元素附近弹出，让操作更便捷；智能给按钮添加焦点；黄金比例垂直居中；超大响应区域特别为ipad等触屏设备优化；预先缓存皮肤图片更快响应…… 跨平台兼容 兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。
Canvas-Prompter:JavaScriptHTML5基于Canvas的提词器
05-01
#Canvas Prompter Canvas Prompter旨在用作简单的提词器，它应可在Mac，PC和iOS / android上的浏览器中使用。 #demo在有一个简单的演示 #controls默认控件很简单： 空间：停止/开始 X：翻转X轴 Y：翻转Y轴 M：使“画布”扩展到窗口的边界（最大化） ESC：停止，返回脚本开头，重新设置速度 + / =：更快 -/_： 慢点 u：放大文字 i：缩小文字 该脚本是纯文本，可以用以下注释： <<开始INFO >>：黄色文本 {is NOTICE}：粉色，无换行符 [重要]：反相和换行
Web前端开发之HTML_3
zx1026409886的博客
04-23 902
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
HTML中的页面可见性
小卡酷谋的博客
04-22 377
所以，所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性（Page Visibility）API 来判断当前页面是显示状态还是隐藏状态。页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法。里页面可见性接口就提供给了程序员一个方法，让他们使用。用户是否去看别的网站了？更多有关页面可见性的内容可以参阅。"页面切换了~目前不可见"
高频前端面试题汇总之HTML篇
qq_51685537的博客
04-18 690
不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是。
HTML使用jQuery实现两个点击按钮，分别控制改文本字体颜色和字体大小
m0_65992344的博客
04-22 441
jQuery 是一个广泛使用的 JavaScript 库，旨在简化对 HTML 文档的操作、事件处理、动画效果和 AJAX 等操作。
【HTML】H5新增元素记录
kakaai77的博客
04-20 531
MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input。data-*是全局属性，可以在所有元素中定义，并且javascript中操作DOM通过dataset轻松获取到。HTML元素用于在HTML中嵌入媒体播放器，支持文档中的视频播放。HTML元素用于在文档中嵌入音频内容，和video的用法类似。遇到浏览器不支持MP4格式时，会自动切换到webm的格式。用途：通常用于HTML和javascritp的数据传递。
Web前端一套全部清晰 ③ day2 HTML 标签综合案例
最新发布
m0_73983707的博客
04-26 270
分析内容 ——> 写代码 ——>保存——>刷新浏览器，看效果。从上到下，先整体到局部，逐步分析制作。
layui数据表格当浏览器缩小时不会自动出现横向滚动条
06-13
在Layui数据表格中，当浏览器缩小时不会自动出现横向滚动条的问题，可以通过以下两种方式解决： 1. 设置表格容器的CSS样式，使其具有固定宽度并且具有横向滚动条。 例如，在表格容器的div标签中添加以下CSS样式： ``` <div style="width: 100%; overflow-x: auto;"> <!-- layui数据表格代码 --> </div> ``` 其中，`width: 100%;`表示容器宽度为100%，`overflow-x: auto;`表示容器出现横向滚动条。 2. 使用Layui提供的 `lay-size="sm"` 属性，将表格设置为响应式表格，当浏览器窗口缩小时，表格会自动变为响应式表格，出现横向滚动条。 例如，在 `table` 标签中添加 `lay-size="sm"` 属性： ``` <table lay-filter="demo" lay-size="sm"> <!-- 表头和表身 --> </table> ``` 以上两种方式均可解决表格缩小时不出现横向滚动条的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值