您的位置首页CSS

一行两列的CSS设置代码

这个是关键的地方让col1往左浮动,这样它的后面(右边)就可以放置别的元素(别的元素:可以是div,图片,文字等)*/

<style type="text/css">

body{font-size:12px;}

.main{width:800px;/* 总的宽度 */

background:yellow;

}

.main .col-1{

float:left;/* 这个是关键的地方 让col1往左浮动,这样它的后面(右边)就可以放置别的元素(别的元素:可以是div,图片,文字等) */

width:300px;height:300px;

background:#eee;border:1px solid #ccc;

}

.main .col-2{

float:left;/* 这个是关键的地方 让col2也往左浮动,紧跟在col1的后面 */

margin-left:5px;/* 让col2和col1之间有些间隔 */

width:490px;height:300px;/* 给一个尺寸 可以随意*/

background:#ddd;

border:1px solid #ccc;

}

.clear-float{clear:both}/* 清除col1和col2的float,否则main的高度会出错 没有包住它里面的有float的元素。 */

</style>

<div class="main">main 我是包在外面的div

<div class="col-1">col1 我是第一列</div>

<div class="col-2">col2 我是第二列</div>

<div class="clear-float">clear-float;我用来清除浮动(清除float)</div>

</div>

本文来自网络,不代表芝麻站长立场,转载请注明出处:http://www.wuhu815.com/css/201979210957.html
联系我们

联系我们

173-5429-9937

在线咨询: QQ交谈

邮箱: web018@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部