您的位置：首页 > Web前端 > CSS

css的布局模型(二)---浮动模型

2017-02-27 21:19 295 查看
二、浮动模型

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的，但可以通过float属性将元素定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。通过下面代码实现两个 div 元素在一行显示。

<style type="text/css">

div{

width: 200px;

height: 200px;

border: 1px solid blue;

float: left;

}

</style>

</head>

<body>

<div>div1</div>

<div>div2</div>

</body>

页面显示结果：



如果将样式中的float值改为right，则页面显示的结果为：



小伙伴可能会问，设置两个元素一左一右可以实现一行显示吗？当然可以啦

只需要将代码修改如下：

<style type="text/css">

div{

width: 200px;

height: 200px;

border: 1px solid blue;

}

#div1{

float: left;

}

#div2{

float: right;

}

</style>

</head>

<body>

<div id="div1">div1</div>

<div id="div2">div2</div>

</body>

显示的结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 布局 浮动 模型
相关文章推荐
新的分享
章节导航