求高宽2:1的源码. 我试了问答里的都不太好用-慕课网

求高宽2:1的源码. 我试了问答里的都不太好用

来源：2-1 CSS margin与百分比单位

helkbore

2016-10-26 16:39

下面是我写的, 实现不了..

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				height: 600px;
				width: 600px;
				overflow: hidden;
				border: 1px solid red;
			}
			
			.box > div {
				background: greenyellow;
				margin: 50%;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div></div>
		</div>
	</body>
</html>

效果是:

测试了火狐是360(谷歌)

写回答关注

4回答

weixin_慕斯5204812

2020-11-05 12:28:39
```
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {border: 1px dashed skyblue;width: 50vw;}.box div {margin: 50%;}</style></head><body><div class="box"><div></div></div></body></html>
```
margin 的百分比参考祖先元素，所以空 div 需要一个给宽的祖先元素（不用给高，因为空div会把它撑起来），我们给 50vw，便于拖动演示。空 div 垂直方向上发生 margin 合并导致，占空只有 50%，空 div 水平方向上不发生 margin 合并导致占空100%，正好造成宽高比 2:1 。父级元素里面只有一个元素，又造成 margin 合并，给父级元素一个田间 border 正好避免父子级的 margin 合并。
代码已经给出，浏览器运行拖动下试试 ?
0 0
幕课20170828

2017-11-02 09:58:40

把高度取消你把高度定死了。

0 0
P妞酱酱

2016-12-02 13:13:32

（1）最里层的div是普通元素，所以其margin的百分比是相对于其容器.box的宽度来计算的；
（2）最里层的div是空元素，所以本身不占据空间；
（3）.box设置overflow:hidden;触发BFC，它会重新计算.box整个盒子的大小（占据尺寸），使得被触发BFC的元素不会影响到外面的元素，所以上下左右四个margin: 50%;不会出现在.box外面；
（4）为什么2：1？因为垂直方向上margin重叠，所以高度上只有一个margin:50%;

0 1
慕粉3843622

2016-10-26 21:05:25

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
height: 600px;
width: 600px;
overflow: hidden;
border: 1px solid red;
}

.box1 {
width: 150px;
height: 300px;
background: greenyellow;
margin: 20%;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

1 0

helkbo...

这个是定长, 不是自适应的..

2016-10-27 08:16:13

共 1 条回复 >