这个两个子DIV的相对距离②应该怎么写

周末加班写bug 2017-12-04 09:59:44
如图

我这样写的
父DIV添加了position: relative;
右边的子DIV
position: absolute;
bottom: 6px;
right: 6px;
左边的子DIV
position: absolute;
bottom: 6px;
还差距离②
...全文
184 4 点赞 打赏 收藏 举报
写回复
4 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
引用 2 楼 jslang 的回复:
在不添加其它元素的情况下,只能用伸缩盒

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.parentDiv {
	width: 500px;
	height: 400px;
	background-color: #06f;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
}
.childrenDiv1 {
	width: 120px;
	height: 80px;
	background-color: #0f0;
	margin-right: 50px;/* ①的值 */
	margin-bottom: 40px;/* ③的值 */
}
.childrenDiv2 {
	width: 120px;
	height: 80px;
	background-color: #f66;
	margin-right: 60px;/* ②的值 */
	margin-bottom: 40px;/* ④的值 */
}
</style>
</head>
<body>
<div class="parentDiv">
	<div class="childrenDiv1"></div>
	<div class="childrenDiv2"></div>
</div>
</body>
</html>

确实好用,但是拿到我的页面里面就不好使了。。。
  • 打赏
  • 举报
回复
引用 1 楼 samuel_luo 的回复:
要实现这种相对距离的布局,子div你应该用相对定位做,需要从右开始布局的话,不妨加一个浮动float:right; 右边的子DIV position: relative; bottom: 6px; right: 6px; float:right; 左边的子DIV position: relative; right:距离② bottom: 6px; float:right;
把bottom和right调成 bottom: -30px; right: 15px; 这样效果出来了,很诡异
  • 打赏
  • 举报
回复
天际的海浪 2017-12-04
在不添加其它元素的情况下,只能用伸缩盒

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.parentDiv {
	width: 500px;
	height: 400px;
	background-color: #06f;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
}
.childrenDiv1 {
	width: 120px;
	height: 80px;
	background-color: #0f0;
	margin-right: 50px;/* ①的值 */
	margin-bottom: 40px;/* ③的值 */
}
.childrenDiv2 {
	width: 120px;
	height: 80px;
	background-color: #f66;
	margin-right: 60px;/* ②的值 */
	margin-bottom: 40px;/* ④的值 */
}
</style>
</head>
<body>
<div class="parentDiv">
	<div class="childrenDiv1"></div>
	<div class="childrenDiv2"></div>
</div>
</body>
</html>

  • 打赏
  • 举报
回复
今晚打老斧 2017-12-04
要实现这种相对距离的布局,子div你应该用相对定位做,需要从右开始布局的话,不妨加一个浮动float:right; 右边的子DIV position: relative; bottom: 6px; right: 6px; float:right; 左边的子DIV position: relative; right:距离② bottom: 6px; float:right;
  • 打赏
  • 举报
回复
相关推荐
发帖
CSS
加入

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2017-12-04 09:59
社区公告
暂无公告