Question

html怎么使得页面缩小里面的内容不会重叠，而保持一定位置？

html怎么使得页面缩小里面的内容不会重叠，而保持一定位置？
求大神解答

我想做成第一个图的效果网页缩放后，元素的位置不会重叠





Answer 1

1、首先打开网页制作应用程序后，通过打开现有编辑区内容进行说明。

2、然后在菜单栏选择查看，其中点击放大和缩小对编辑区进行页面缩放。

3、通过使用快捷命令ctrl+=放大编辑区页面。

4、然后通过使用快捷命令ctrl+-缩小编辑区页面。

5、或者在菜单栏中点击查看>缩放比率选择百分比来放大缩小编辑区。

Answer 2

1、使用相对布局，不要用绝对布局，position：relative；使用margin-left：margin-top等，来分别设置边距。

遇见不会做的，按F12打开开发者模式，复制粘贴就行了，天下设计一大抄。

Answer 3

可以使用transform，支持可变高度。
用法比较常见的是，以百分比计算让内容块始终居中的样式：transform: translate(-50%,-50%)和top: 50%; left: 50%;。
如果你想要内容快也相应缩小，可以将宽高也设成百分比，例如
.is-Transformed {

width: 50%;
height：30%；
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
具体该调多少百分比你可以调整下。注意要添加-webkit和-ms为了保证浏览器之间兼容。

Answer 4

会浮动吗? position:relative 固定登录的div距离浏览器左边的距离, 那么无论你是怎么拉, 内容都会距离浏览器左侧一样, 不会随屏幕大小变动

追问

大神，举个例子吧0-0