html之div学习记录3

最新推荐文章于 2022-09-29 10:20:30 发布

蜜蜂就是我自己

最新推荐文章于 2022-09-29 10:20:30 发布

阅读量412

点赞数

分类专栏：前端 test 文章标签： html css

本文链接：https://blog.csdn.net/jjf09/article/details/78956770

版权

test 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

上篇博文提到了设置word-wrap 等css样式来解决div中内容过多而造成的不自动换行问题，下面的代码：

<html>
<head></head>
<body>
    <div>
        <div style="float:left; width:50%">qwqeqwoe最外层的div 的width为1294px, height为0, 分析如下： 
里面的子div使用float后导致上面的结果，可见当里面的子div使用float后，子div的宽度不是显示为浏览器的宽度，而是由div里面的内容决定，不会占用一行，第二个使用了float的子div不会显示为新的一行，第三个没有使用float的子div把前面两个同级的div看做透明的ewrvsffffffffffffffffff7</div>
        <div>输入 netstat -ano|findstr “8080” 找到占用该端口的进程PID ，本机为 3864输入 tasklist|findstr 3864 获取占用程序名称，我的电脑为ApplicationWebServertaskkill /f /t /im ApplicationWebServer.exe 还有一种简便方法就是： 
在执行上面1所述的步骤后，输入taskkill /F /PID 3864 ,这样就可以解决端口被占用的问题</div>

    <div>
</body>
</html>

上面的代码显示效果如下：

这里写图片描述

所以对上面的代码进行改进：

<html>
<head>
    <style>
    div{
    word-break: break-all;/*自动换行*/
    word-wrap: break-word;/*以单词换行*/
    <!--white-space: pre-wrap;-->
    } 
</style>
</head>
<body>
    <div>
        <div style="float:left; width:50%">qwqeqwoe最外层的div 的width为1294px, height为0, 分析如下： 
里面的子div使用float后导致上面的结果，可见当里面的子div使用float后，子div的宽度不是显示为浏览器的宽度，而是由div里面的内容决定，不会占用一行，第二个使用了float的子div不会显示为新的一行，第三个没有使用float的子div把前面两个同级的div看做透明的一ewrvsffffffffffffffffffffffffffffffffffffffcccccccccccccccccccccccccccccccvbdfbbbbbdsqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqfref4444444555555555555555555555555555555555555555555555555555555555555555552311111111111111111111777777777777cccccccccccccccccccccqqqqqqqqqqq1213124243543654765uuuuuuuuuuuuuuuuuuuuuuuuuuu</div>
        <div>输入 netstat -ano|findstr “8080” 找到占用该端口的进程PID ，本机为 3864输入 tasklist|findstr 3864 获取占用程序名称，我的电脑为ApplicationWebServertaskkill /f /t /im ApplicationWebServer.exe 还有一种简便方法就是： 
在执行上面1所述的步骤后，输入taskkill /F /PID 3864 ,这样就可以解决端口被占用的问题</div>

    <div>
</body>
</html>