HTML div learning record 3

The last blog post mentioned setting css styles such as word-wrap to solve the problem of non-automatic line wrapping caused by too much content in the div. The following code:

<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>

The above code shows the effect as follows:

write picture description here

So improve the above code:

<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>

write picture description here

As shown above height =136px

In fact, this code confirms another conclusion that the child div using the float attribute cannot support the height of the parent div. The second blog post above is wrong.

write picture description here

As shown in the figure above: height = 63px, the height of the parent div is also 63px , so another conclusion is confirmed that the child div using the float attribute cannot support the height of the parent div

HTML div learning record 3

As shown above height =136px

Guess you like