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

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

html css

Html 如何在两个div上制作响应性div/按钮/图像？,html,css,Html,Css,我正在测试两个框架（skeleton.css和crow.css）来生成响应网格，但我不能集中并在两列上放置div。有两张照片显示了它的外观：使用crow的实际html代码： <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <meta name="viewport" content="width=device-width, init

我正在测试两个框架（skeleton.css和crow.css）来生成响应网格，但我不能集中并在两列上放置div。有两张照片显示了它的外观：使用crow的实际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>

.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>

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

您可以使用css

transform

属性来实现所需的定位

它的工作原理是将

.img

的左侧设置为50%，然后

变换：平移（-50%）

再次将其向右偏移一半宽度，使

.img

完全居中

我已经为您做了“骷髅”一个，但“乌鸦”一个将是相同的：

.box{
背景：#eee；
边界半径：4px；
高度：200px；
边框：1px纯黑；
}
.img{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.集装箱{
位置：相对位置；
}

花了太多时间来设计这个，结果@Zze击败了我。但是，是的，相对和绝对定位加上

translate（）

肯定能完成这项工作

.wrap{
位置：相对位置；
最大宽度：960像素；
保证金：自动；
背景：rgba（0,0,0,0.1）；
填充：2.5%；
框大小：边框框；
高度：360px；
}
.左，.右{
宽度：50%；
身高：100%；
浮动：左；
填充：10px；
框大小：边框框；
}
.内容{
背景#84bde4；
宽度：100%；
身高：100%；
}
.居中{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
z指数：99；
高度：100px；
宽度：100px；
边界半径：100px；
背景：#f1c25e；
盒影：0px16px26px-10pxRGBA（0,0,0,0.25）；
文本对齐：居中；
}

您是在使用的框架内寻找解决方案，还是对自定义代码解决方案持开放态度？假设图像的尺寸为100px*100px，您可以尝试

。img{position:absolute；left:calc（50%-50px）；top:calc（50%-50px）；}

但您需要为其定义尺寸。crow@Banzay，什么事也没发生。对不起，杰西，你的看起来很棒！哈哈，不用担心！