当前位置： 移动技术网 > IT编程>网页制作>CSS > 【代码笔记】Web-CSS-CSS Align

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

2019年02月19日  | 移动技术网IT编程  | 我要评论

kb923789,斯诺克英格兰公开赛,很太吧官方

一，效果图。

 

二，代码。

复制代码
<!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>
复制代码

 

参考资料：《菜鸟教程》

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网