求教：HTML 排版布局问题

清风随我览江山 2016-11-04 11:19:16

如图，要求做到途中的位置排布，并且任意缩放相互间的位置都不会改变。还要适应谷歌、IE 、360 等各种浏览器，谢谢！

...全文

441 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

weixin_44356123 2019-06-24

打赏
举报

清风随我览江山 2016-11-06

打赏
举报

引用 4 楼 csdn9_14 的回复:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
	.content{position:absolute;width:50%;height:50%;margin:10%;border:1px solid black;}
	.div1{position:relative;height:30%;width:50%;border:1px solid black;margin:5%;}
	.div2{position:relative;height:40%;width:50%;border:1px solid black;margin:5%;}
	.div3{position:relative;left:60%;top:-70%;width:35%;height:30%;border-radius:10px;border:1px solid black;}
</style>
</head>

<body>
	<div class="content">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <div class="div3">div3</div>
   	</div>
</body>
</html>

你可以试下这个。

谢谢，我试试。

清风随我览江山 2016-11-06

打赏
举报

引用 3 楼 lqd0917 的回复:

用bootstrap 样式控制为col-xs-* 用超小屏自己试试

谢谢~

清风随我览江山 2016-11-06

打赏
举报

引用 2 楼 f247316233 的回复:

[quote=引用 1 楼 luoqiang_sky 的回复:] 来人啊，求大神帮助~~

你这样是不会有人给你弄的，自己先试着弄弄。[/quote] 抱歉，我自己做的都不行，想着会影响大家思路，就没拿出来献丑了

俊刚、 2016-11-05

打赏
举报

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
	.content{position:absolute;width:50%;height:50%;margin:10%;border:1px solid black;}
	.div1{position:relative;height:30%;width:50%;border:1px solid black;margin:5%;}
	.div2{position:relative;height:40%;width:50%;border:1px solid black;margin:5%;}
	.div3{position:relative;left:60%;top:-70%;width:35%;height:30%;border-radius:10px;border:1px solid black;}
</style>
</head>

<body>
	<div class="content">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <div class="div3">div3</div>
   	</div>
</body>
</html>

你可以试下这个。