• 【代码笔记】Web-CSS-CSS Align


    一,效果图。

     

    二,代码。

    复制代码
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>CSS Align</title>
        <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        .container {
            position: relative;
            width: 100%;
        }
        
        .center {
            margin: auto;
            width: 70%;
            background-color: #b0e0e6;
        }
        
        .right {
            position: absolute;
            right: 0px;
            width: 300px;
            background-color: #b0e0e6;
        }
        
        .right {
            float: right;
            width: 300px;
            background-color: #b0e0e6;
        }
        </style>
    </head>
    
    <body>
        <div class="center">
            <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
            <p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
        </div>
        <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
        <div class="right">
            <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
            <p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
        </div>
        <div class="container">
            <div class="right">
                <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
            </div>
        </div>
        <div class="right">
            <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
            <p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
        </div>
    </body>
    
    </html>
    复制代码

     

    参考资料:《菜鸟教程》

     

  • 相关阅读:
    软件下载
    01_动态规划之01背包问题
    25_使用切片建立一个动态的二位数组.go
    为什么突然想起来写博客
    24_切片的使用
    23_随机数的生成和冒泡排序
    22_数组做函数参数
    21_一维数组和二位数组的使用
    20_指针类型的使用
    19_获取命令参数
  • 原文地址:https://www.cnblogs.com/yang-guang-girl/p/10393767.html
Copyright © 2020-2023  润新知