http://www.w3school.com.cn/css/css_pseudo_elements.asp

.pbox{
			padding-right: 120px;
		}
		.pbox img{
			float: right;
			margin-right: -120px;
		}

还要对图片进行定位，你的想法是对的。

给撑开了，上 右 下 左各占等比50的宽高，就形成了正方形

多看，多练就好了

upekpsxnhliyragjuayobhkilakmrlvzipmknpplctuzeevbgrbrttiyvtpwbqpdncrwgopqtkpuxjjtauswwtstpemuzluqe

因为div1和div2在没有内容的情况下，都是被padding-bottom撑开的 600px，然后配合最外层div（黑色边框，灰色背景区域）的属性overflow:hidden，将多余的隐藏掉。

当我给其中一个div1放置内容的时候，div1的高度就发生了变化 （等于 padding-bottom + 放置内容的高度）

与此同时，最外层div的高度也被撑开了，由于overflow:hidden，导致在视觉上div2和div1显示的高度区域是一样高，也就是等高效果。但是实际上不是等高的。

这也就导致当其中一个div的填充的内容高度大于另外一个div的填充的内容高度 + padding-bottom 的时候，就会出现破绽，类似图中灰色区域

我的解决办法是将600px这一数值改成一个超大值，列如9999999999px; 这样几乎不会出现破绽

不知道我的理解对不对，对的话有没有其他的解决办法

ipad不在身边，用模拟器看了一下。

你说的网易首页如下图：

今日头条如下图：

你可以看到明显的区别，下面图中的图片随屏幕尺寸变大了，但是文字没有，造成文字和图片不成比例，中间也有了非常大的空白区域。

屏幕变大，页面也随之变大，这是很正常的事情。你不可能说，我拿50寸的液晶看电视，还是看个手机视频的效果。

至于为什么不用PX，是就是因为PX是固定的值，不管你在多大的屏幕上12PX的文字，就只有那么一丁点小。那为什么不用百分比，不用vw这些自适应的单位，而是用同样是固定值的rem或者em？这个还是有点缘由的，你可以自己去了解一下。

画了张简图看下能不能更好理解点（只画了单边，另一边同理）

左边数，第一行是原来的样式，第二章添加padding，第三章添加margin

首先padding-bottom:600px将内容撑开了600px(绿色的部分)，但是下一个元素（蓝色）就会排到600px之后，所以用margin-bottom:-600px,就可以将下一个元素排回到原来的位置，但是这时两边的内容实际高度已经超过600px了，因为有overflow:hidden，所以看不见，二添加元素（蓝色）撑开高度就可以让另一边背景也显示出来

img是内联元素 ，现在div里面设置text-align:center；可让图片水平居中，然后设置div  line-height=height；设置 img vertical-aligin:middle; 可让水平垂直方向都居中