这种情况怎么让其在左上角?

这种情况怎么让其在左上角?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        body{

            font-family: '微软雅黑';

        }

        .per{

            width: 400px;

            height: 200px;

            border: 1px solid #CCC;


        }

        .red{

            width: 100px;

            height: 100px;

            background: red;

            margin: 10px;

            /*此处写代码*/

            float:left;

            padding:0;

            margin:0;

        }

    </style>

</head>

<body>

    <div class="per">

      

        慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言,包括基...

       

        <div class="red"></div>

    </div>

</body>

</html>

http://img1.sycdn.imooc.com//climg/5c079cb50001831e12970557.jpg


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
chrismorgen 2018-12-06 11:05:59

如果你使用float,父元素和子元素都具有浮动属性,所以是按正常的顺序排列的,解决的办法只能是向上一位老师所讲的,将red标签放在字体上方,如果同学想强制将红色方块放在左上角,也是可以的,即通过绝对定位来完成,具题实现可以参考下图代码,祝学习愉快~

http://img1.sycdn.imooc.com//climg/5c0891ef0001bffe03820402.jpg

好帮手慕阿满 2018-12-05 18:55:45

同学你好,想要红色方块在左上,需要在定义标签时,red标签在字体上方,如图:

http://img1.sycdn.imooc.com//climg/5c07aea70001342106710216.jpg

如果我的回答解决了你的疑惑,请采纳。祝:学习愉快!

  • 提问者 1qazwsx #1
    现在就想让red标签在下面,怎么实现红色框在左上角
    2018-12-05 19:54:24
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10205    个

如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师