章节
问答
课签
笔记
评论
占位
占位

起飞咯 - 浮动模型

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

任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

效果图

当然你也可以同时设置两个元素右浮动也可以实现一行显示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

效果图

又有小伙伴问了,设置两个元素一左一右可以实现一行显示吗?当然可以:

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

效果图

 

任务

我来试一试:

在右侧的代码编辑器中试一试使两个栏目并排显示出来且两个栏目都是左对齐

 

?不会了怎么办

在右侧代码编辑器中的第12行,输入下面代码:

float:left;
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 慕神0128170
border标签设置边框大小要框子分开的话要设置margin标签

最新回答 / qq_慕标2222665
初学者刚把教程看了一遍。个人感觉是:div1和div2没有把整行占满。所以导致后续的元素去填充剩余的区域了。可以想象成一整块显示区域缺了左上角400×300的区域,剩余的元素继续按照流动模型显示。

最新回答 / 番茄boy
可以拿其它的例子想, 比如word文档里的图片格式为文字环绕,图片放在文字上,文字就被挤开环绕在周围

最赞回答 / kiksuya
把宽度width调小一点,比如100px就能看到效果了。因为宽度超出了页面大小,所以会显示在下一行

最赞回答 / 宝慕林3013065
现在整个body没有高度,目前我所学到的使用一个外层div,设置一下宽高包裹一下就可以居中了<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>浮动模型</title>    <style type="text/css"> .div{ position: absolute; width: 408px; height: 400px; righ...

最赞回答 / LoveXiaoJian
float:center;这样直接用是不行的,无法居中;简单的方式还是这个吧text-align:center;;刚试了好几种

最新回答 / 木_偶
#div{}这个是id选择器

已采纳回答 / 慕码人8024790
右边显示面板宽度不够,调整一下就好了

已采纳回答 / 慕阿斯蒂芬
两者的区别是float可以设置元素左浮动和右浮动,display:inline-block只是将元素设置为行内块元素

最新回答 / qq_慕运维6354975
用固定定位就可以position;fixed
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言