没搞懂的一段css

weixin_34092370

于 2013-06-14 16:41:00 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alliswell/archive/2013/06/14/3135856.html

本文通过一个简单的HTML页面展示了如何使用CSS的浮动属性来实现元素的左右排列。通过对不同类别的div元素应用left和right浮动，实现了左侧两个灰色框并排显示，右侧一个灰色框单独显示的效果。此外，还探讨了清除浮动的方法。

.left{
    width:100px;
    height:100px;
    background-color:#eeeeee;
    border:1px solid green;

    float:left;
}
.right{
    width:100px;
    height:100px;
    background-color:#aaaaaa;
    border:1px solid red;

    float:right;
}
#b{
    width:100px;
    height:100px;
    background-color:#555555;
    border:1px solid pink;
    //float:left;
    //clear:left;
}
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="tmp.css">
</head>
<body>

    <div class="left">A</div>
    <div class="left">B</div>
    <div class="right">C</div>
    <div id="b">X</div>

</body>
</html>

View Code