美文网首页
CSS-设计初衷(图文混排,环绕方式)

CSS-设计初衷(图文混排,环绕方式)

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

    一、目录结构和代码对比

    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

    相关文章

      网友评论

          本文标题:CSS-设计初衷(图文混排,环绕方式)

          本文链接:https://www.haomeiwen.com/subject/bbhhmrtx.html