Question

我正在测试两个框架（skeleton.css和crow.css）来制作响应式网格，但我无法集中并将div放在两列上。有两个图片显示它的外观： Desktop Smartphone 带乌鸦的实际html代码：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/crow.css">
  <link rel="stylesheet" href="css/custom.css">
</head>
<body>
  <div class="crow">
    <div class="ws-5 box">
    </div>
    <img class="img" src="images/img.png">
    <div class="ws-5 box">
    </div>
  </div>
</body>
</html>

custom.css with crow：

.box {
  background: #eee;
  border-radius: 4px;
  height: 200px;
  border: 1px solid black;
}
.img {
  position: absolute;
  left: 550px;
}
.crow {
  position: relative;
}

带骨架的Html代码：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/custom.css">
</head>
<body>
  <div class="container">
    <div class="six columns box">
    </div>
    <img class="img" src="images/img.png">
    <div class="six columns box">
    </div>
    </div>
  </div>
</body>
</html>

带骨架的

custom.css：

.box {
  background: #eee;
  border-radius: 4px;
  height: 200px;
  border: 1px solid black;
}
.img {
  position: absolute;
  left: 420px;
}
.container {
  position: relative;
}

Answer 1

花了太多时间设计这个，@ Zze打败了我。但是，相对和绝对定位加translate()肯定会完成工作。

＆＃13;

.wrap {
  position: relative;
  max-width: 960px;
  margin: auto;
  background: rgba(0,0,0,0.1);
  padding: 2.5%;
  box-sizing: border-box;
  height: 360px;
  }
.left, .right {
  width: 50%;
  height: 100%;
  float: left;
  padding: 10px;
  box-sizing: border-box;
  }
  
.content {
  background: #84bde4;
  width: 100%;
  height: 100%;
  }

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  height: 100px;
  width: 100px;
  border-radius: 100px;
  background: #f1c25e;
  box-shadow: 0px 16px 26px -10px rgba(0,0,0,0.25);
  text-align: center;
  }

＆＃13;

<div class="wrap">
  <div class="centered"></div>
  <div class="left"><div class="content"></div></div>
  <div class="right"><div class="content"></div></div>
</div>

＆＃13;

Answer 2

您可以使用css transform属性来实现所需的定位。

通过将.img的左侧设置为50％，然后transform: translate(-50%)再次将其宽度的一半偏移到右侧，完美地居中于.img

我为你做了一个'骨架'，但是“乌鸦”将是相同的：

.box {
  background: #eee;
  border-radius: 4px;
  height: 200px;
  border: 1px solid black;
}
.img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.container {
  position: relative;
}

<div class="container">
  <div class="six columns box">
  </div>
  <img class="img" src="http://placehold.it/350x150">
  <div class="six columns box">
  </div>
</div>

如何在两个div上制作响应式div /按钮/图像？

2 个答案: