求高宽2:1的源码. 我试了问答里的都不太好用
下面是我写的, 实现不了..
<!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(谷歌)
个回答
-
- 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 合并。
代码已经给出，浏览器运行拖动下试试 ?
-
- 幕课20170828
- 2017-11-02 09:58:40
把高度取消 你把高度定死了。
-
- 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%;
-
- 慕粉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>