死亦秋叶之静美 发表于 2019-12-14 17:28:44

运行结果

大佬们,我跟着视频上敲得浮动的代码但是运行起来却跟视频上的运行结果不一样,是为什么
下面是代码,我不会往上边放照片,有知道的大佬帮忙解决一下呗,看看我是哪写的不对。谢谢
<!DOCTYPE html>
<html>
        <head>
                <meta charset = "utf - 8">
                <title></title>
        </head>
        <style type = "text/css">
                .green {
                        width: "100px"; height: "100px";
                        background-color: green ;
                        float: left;
                }
                .red {
                        width: "200px"; height:"150px";
                        background-color: red;
                }
                .a {
                        width: "200px";
                        background-color: green;
                }
                .b {
                        width: "700px";
                        background-color: red;
                }
                .c {
                        width: "300px";
                        background-color: blue;
                }
                .a, .b, .c {
                        float: left; height: 200px;
                }
        </style>
        <body>
                <p>文字环绕效果</p>
                <div class = "green"></div>
                <div class = "red">文字环绕文字环绕文字环绕文字环绕</div>
                <p>横向排版布局</p>
                <div class = "a"></div>
                <div class = "b"></div>
                <div class = "c"></div>
        </body>
</html>

zltzlt 发表于 2019-12-14 17:32:49

上传图片:https://fishc.com.cn/forum.php?mod=viewthread&tid=146733

死亦秋叶之静美 发表于 2019-12-14 17:50:19

zltzlt 发表于 2019-12-14 17:32
上传图片:https://fishc.com.cn/forum.php?mod=viewthread&tid=146733

没整明白

zltzlt 发表于 2019-12-14 17:50:45

死亦秋叶之静美 发表于 2019-12-14 17:50
没整明白

……

死亦秋叶之静美 发表于 2019-12-14 17:54:02

zltzlt 发表于 2019-12-14 17:50
……

没找到第三个文本框

zltzlt 发表于 2019-12-14 17:55:05

死亦秋叶之静美 发表于 2019-12-14 17:54
没找到第三个文本框

好吧,这个方法貌似不管用了

你能详细说明你的问题吗?

死亦秋叶之静美 发表于 2019-12-14 18:04:57

zltzlt 发表于 2019-12-14 17:55
好吧,这个方法貌似不管用了

你能详细说明你的问题吗?

css的浮动,但是视频上的最终结果是一个绿色的小方块在一个大的红的方块里镶嵌着,左上角是对齐的,然后另一个输出结果是绿红蓝由上到下排列着,这个都在一个页面上显示出来了
我的输出结果是就三段文字,然后中间那个是红色的,别的再也没有啥了,跟视频上的输出结果不一样。我不知道这样说您能理解吗

zltzlt 发表于 2019-12-14 18:09:08

死亦秋叶之静美 发表于 2019-12-14 18:04
css的浮动,但是视频上的最终结果是一个绿色的小方块在一个大的红的方块里镶嵌着,左上角是对齐的,然后 ...

应把 css 中的引号去掉。

<!DOCTYPE html>
<html>
      <head>
                <meta charset = "utf - 8">
                <title></title>
      </head>
      <style type = "text/css">
                .green {
                        width: 100px; height: 100px;
                        background-color: green ;
                        float: left;
                }
                .red {
                        width: 200px; height: 150px;
                        background-color: red;
                }
                .a {
                        width: 200px;
                        background-color: green;
                }
                .b {
                        width: 700px;
                        background-color: red;
                }
                .c {
                        width: 300px;
                        background-color: blue;
                }
                .a, .b, .c {
                        float: left; height: 200px;
                }
      </style>
      <body>
                <p>文字环绕效果</p>
                <div class = "green"></div>
                <div class = "red">文字环绕文字环绕文字环绕文字环绕</div>
                <p>横向排版布局</p>
                <div class = "a"></div>
                <div class = "b"></div>
                <div class = "c"></div>
      </body>
</html>
页: [1]
查看完整版本: 运行结果