为了账号安全,请及时绑定邮箱和手机立即绑定

为什么用float两列布局做不起来?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

.mainbody{width:600px;}

.mainbody.left{width:100px;float:left}

.mainbody.right{width:500px;float:left;}


</style>

</head>


<body>

<div class="mainbody">

<div class="left"><img src="file:///C|/Users/Admini/Desktop/wifi.jpg" />

</div>

<div class="right">

<h6>报复社会的少女</h6>

<p>您已经对代码进行了修改,如果要编辑选定对象的属性,请点击刷新或按F5</p>

<span>10分钟之前</span>

</div>

</div>


</body>

</html>

</style>

</head>


<body>

<div class="mainbody">

<div class="left"><img src="file:///C|/Users/Admini/Desktop/wifi.jpg" />

</div>

<div class="right">

<h6>报复社会的少女</h6>

<p>您已经对代码进行了修改,如果要编辑选定对象的属性,请点击刷新或按F5</p>

<span>10分钟之前</span>

</div>

</div>


</body>

</html>


正在回答

5 回答

.mainbody.left{width:100px;float:left}

.mainbody.right{width:500px;float:left;}

  • 这段代码的.left与.right前面缺少一个空格,具体原因请查看HTML-CSS基础学习的8-7包含(后代)选择器的相关学习;

    .mainbody .left{width:100px;float:left}

    .mainbody .right{width:500px;float:left;}

  • 还有那个overflow:hidden是针对紧邻其后的元素进行清除浮动设置,而不是针对其本身。

  • 建议你写代码时适当缩进,这样不容易出错,希望对你有帮助。


1 回复 有任何疑惑可以回复我~
#1

卡兰尼克 提问者

非常感谢!
2016-10-25 回复 有任何疑惑可以回复我~

57fb50ec0001306c05000282.jpg

57fb50ed00010fb005000282.jpg



老师也是这样写的 为什么她的可以浮动我的不可以呀


0 回复 有任何疑惑可以回复我~

老师也是这样写的,为什么他的就可以浮动我的不可以啊
57fb50620001b8b503840216.jpg

57fb506700018b9403840216.jpg

0 回复 有任何疑惑可以回复我~

图片也要浮动啊

0 回复 有任何疑惑可以回复我~
#1

卡兰尼克 提问者

谢谢o(≧v≦)o
2016-10-10 回复 有任何疑惑可以回复我~

额 代码多复制了一层

  加了overflow:hidden;或者把right{}中改成右浮动float:right;都没用

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
网页简单布局之结构与表现原则
  • 参与学习       108277    人
  • 解答问题       395    个

入门必杀技之结构与表现相分离,课程会有3个案例,不同角度讲解

进入课程

为什么用float两列布局做不起来?

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号