Question

我需要在需要居中的div上有4个分层div。 4个div应该都在角落里。

我能够让它工作但不幸的是，当我调整屏幕大小时，它会变得混乱。

有人可以帮我纠正这段代码，使其看起来像下图吗？

image of what I am trying to achieve

我的代码是

＆＃13;

body {
  color: #fff;
  font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.box-set,
.box {
  border-radius: 6px;
}
.box-set {
  background: #eaeaed;
  height: 160px;
  position: relative;
  top: 200px;
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.box {
  background: #2db34a;
  border: 2px solid #ff7b29;
  height: 80px;
  line-height: 80px;
  position: absolute;
  text-align: center;
  width: 80px;
}
.box-1 {
  left: -5%;
  top: -15%;
}
.box-2 {
  bottom: -15%;
  left: -5%;
  z-index: 3;
}
.box-3 {
  left: 88%;
  top: -15%;
  z-index: 2;
}
.box-4 {
  bottom: -15%;
  left: 88%;
  z-index: 1;
}

＆＃13;

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="box-set">Year sales
    <figure class="box box-1">Jan 1100</figure>
    <figure class="box box-2">Feb 2200</figure>
    <figure class="box box-3">March 3300</figure>
    <figure class="box box-4">April 4400</figure>
  </div>
</body>

＆＃13;

Answer 1

查看你的代码。我删除了数字标签上的边距。这是你想要的。见下文。

＆＃13;

body {
  color: #fff;
  font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.box-set,
.box {
  border-radius: 6px;
}
.box-set {
  background: #eaeaed;
  height: 160px;
  position: relative;
top:200px;
width:50%;
display: block;margin-left: auto;margin-right:auto;
}
.box {
  background: #2db34a;
  border: 2px solid #ff7b29;
  height: 80px;
	line-height: 80px;
  position: absolute;
  text-align: center;
  width: 80px;
  margin: 0;/**Added this**/
}
.box-1 {
  left: -5%;
  top: -15%;
}
.box-2 {
  bottom: -15%;
  left: -5%;
  z-index: 3;
}
.box-3 {
  right: -5%;/**Added this**/
  top: -15%;
  z-index: 2;
}
.box-4 {
  bottom: -15%;/**Added this**/
  right: -5%;
  z-index: 1;
}

＆＃13;

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box-set">Year sales
  <figure class="box box-1">Jan 1100</figure>
  <figure class="box box-2">Feb 2200</figure>
  <figure class="box box-3">March 3300</figure>
  <figure class="box box-4">April 4400</figure>
</div></body>

＆＃13;

CSS Div叠加在响应式设计中

1 个答案: