CSS-设计初衷（图文混排，环绕方式）

作者: 测试探索 | 来源:发表于2022-06-10 20:59 被阅读0次

CSS-设计初衷（图文混排，环绕方式）
CSS理解之Float
图文混排
CSS Float
Web前端篇：css浮动
理解float
CoreText实现图文混排之文字环绕及点击算法
50行代码实现图文混排
OpenGL纹理常用API解析
float及清除

一、目录结构和代码对比

image.png

demo1

div与p是同级关系
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="div1">
        <img src="../image/3.png">

    </div>
    <p>散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。
    散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。
    散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。
    散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。
    散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。</p>

</body>
</html>

index.css

#div1{
    background-color: red;
    float: left;
}

img{
    vertical-align: bottom;

}

p{
    text-align: justify;
    line-height: 20px;
}

image.png

demo2

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="div1">
        <img src="../image/3.png">
        <p>散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。
    散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。
    散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。
    散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。
    散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。</p>

    </div>


</body>
</html>

index.css

#div1{
    /*背景为白色*/
    background-color: #ffffff;
    float: left;
}

img{
    vertical-align: bottom;
    float: left;

}

p{
    margin-top: 0px;
    text-align: justify;
    line-height: 20px;
    background-color: #ffffff;
}

image.png