我正在测试两个框架(skeleton.css和crow.css)来制作响应式网格,但我无法集中并将div放在两列上。 有两家图片显示它如何看:如何在两个div上制作响应式div /按钮/图像?
<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与乌鸦:
.box {
background: #eee;
border-radius: 4px;
height: 200px;
border: 1px solid black;
}
.img {
position: absolute;
left: 550px;
}
.crow {
position: relative;
}
HTML代码与框架:
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/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;
}
您是否正在寻找您所使用的框架内解决,或者是你开出了自定义代码解决方案吗? – Jesse
假设图像的尺寸是100px * 100px,您可以尝试使用'.img { position:absolute; left:calc(50% - 50px); top:calc(50% - 50px); }'但你需要为.crow – Banzay
@Banzay定义尺寸,没有任何事情发生。 –