为什么实现第二种需要用div包裹着p才能实现
黑白灰菌
2017-03-14 10:10
<style>
div{
float:left;
width:100%;
}
p{
margin-right:320px;
}
img{
float:left;
width:300px;
margin-left:-300px;
}
</style>
<div>
<p>
因为他也是喜欢编程和技术的家伙，于是，我让他把他的一些学习Python和Web编程的一些点滴总结一下。于是他给我发来了一些他的心得和经历，我在把他的心得做了不多的增改，并根据我的经历增加了“进阶”一节。这是一篇由新手和我这个老家伙根据我们的经历完成的文章。
我的这个朋友把这篇文章取名叫Build Your Programming Technical Skills，我实在不知道用中文怎么翻译，但我在写的过程中，我觉得这很像一个打网游做任务升级的一个过程，所以取名叫“技术练级攻略”，题目有点大，呵呵，这个标题纯粹是为了好玩。这里仅仅是在分享
前言,你是否觉得自己从学校毕业的时候只做过小玩具一样的程序？走入职场后哪怕没有什么经验也可以把以下这些课外练习走一遍（朋友的抱怨：学校课程总是从理论出发，作业项目都看不出有什么实际作用，不如从工作中的需求出发）
</p>
</div>
<img src="demo.jpg"/>
为什么外部需要包裹一层div，直接设置
p{
width:100%;
float:left;
margin-right:320px;
}
不能实现呢？
2回答
-
- 六翅兽
- 2017-03-14 12:52:34
我是一个菜鸟，刚刚接触css，看到师兄的问题，我实际测试了下，确实如师兄所说不能实现。首先p和img都浮动left，那么它们两在没设置margin的时候应该是仅仅挨在一起的。p标签内容比较多，占据整个浏览器窗口，多行显示，img被挤到下一行。最为关键的是你的p设置width：100%；那个p占据整个浏览器窗口的宽度，此时的margin-right被挤到浏览器窗口右侧不可见的区域，此时设置img的格式，其实它就在那个右侧不可见的区域里。
要解决的话你把width：100%；去掉就行。 一个菜鸟的分解，如有不对，请指正，互相学习。
-
- 慕九州5249392
- 2019-11-27 11:48:44
这里可能楼主早搞懂了，我也是刚刚在学这篇课程，说一下给其他看到的人做一下参考，如果是没加div，p的右边距是相对浏览器窗口，给了会使浏览器窗口增大，如果是加了div，p的右边距是相当div，又由于是左浮动，给了图像右边距为负且大于图片，所以就不会增大浏览器窗口了。如果不对，可以指正
CSS深入理解之float浮动
75978 学习 · 461 问题
相似问题