有关特定设计和文本叠加对齐的Flexbox问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有关特定设计和文本叠加对齐的Flexbox问题相关的知识，希望对你有一定的参考价值。
在我介绍了这里的flexboxes之后（我还是相当新的编程），我一直在尝试用flexboxes逐个替换旧的表结构。
我目前正在努力绕过某个设计并且遇到文本覆盖问题 - 这些都到处都是。
请参阅2列1行设计示例：
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.container {
width: auto;
height: auto;
overflow: hidden;
}
.bolimg {
background-size: cover;
width: 100%;
height: 100%;
-webkit-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-o-transition: 1s ease-out;
-ms-transition: 1s ease-out;
transition: 0.1s ease-out;
}
.bolimg:hover {
height: 102%;
width: 102%;
margin-left: -1.5%;
margin-top: -1.5%;
}
.container:hover .middle {
opacity: 1;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<div class="child_3000">
<div class="container">
<div class="bolimg">
<img src="http://via.placeholder.com/350x350">
<div class="middle">
<div class="text">Text 1</div>
</div>
</div>
</a>
</div>
</div>
<div class="child_3000">
<div class="container">
<div class="bolimg">
<img src="http://via.placeholder.com/350x350">
<div class="middle">
<div class="text">Text 2</div>
</div>
</div>
</div>
</div>
</body>
</html>我想要的设计看起来像这样（盒子之间的间距相等）：
答案
根据@Hunter Turner的建议得出结论：
<html>
<head>
<style>
.bolimg {
background-size: cover;
width: 100%;
height: 100%;
-webkit-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-o-transition: 1s ease-out;
-ms-transition: 1s ease-out;
transition: 0.1s ease-out;
}
.bolimg:hover {
height: 102%;
width: 102%;
margin-left: -1.5%;
margin-top: -1.5%;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.grid-1 {
display: grid;
width: 100%;
max-width: 100%;
margin: 0 auto;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 280px);
grid-gap: 10px;
}
/* items */
.grid-1 div {
color: white;
font-size: 20px;
padding: 0px;
}
/* specific item styles */
.item-1 {
background: #30997a;
width: auto;
height: auto;
overflow: hidden;
}
.item-1:hover .middle_one {
opacity: 1;
}
.item-2 {
background: #33a8a5;
width: auto;
height: auto;
overflow: hidden;
}
.item-3 {
background: #b03532;
grid-column: 3 / span 2;
grid-row: 1 / span 2;
width: auto;
height: auto;
overflow: hidden;
}
.item-4 {
background: #6a478f;
grid-column: 1 /span 2;
grid-row: 2 / span 2;
width: auto;
height: auto;
overflow: hidden;
}
.item-5 {
background: #da6f2b;
width: auto;
height: auto;
overflow: hidden;
}
.item-6 {
background: #da6f2b;
width: auto;
height: auto;
overflow: hidden;
}
</style>
</head>
<body>
<section class="grid-1">
<div class="item-1">
<div class="bolimg">
<img src="http://via.placeholder.com/800x533">
</div>
</div>
<div class="item-2">
<div class="bolimg">
<img src="http://via.placeholder.com/800x533">
</div>
</div>
<div class="item-3">
<div class="bolimg">
<img src="http://via.placeholder.com/1530x1020">
</div>
</div>
<div class="item-4">
<div class="bolimg">
<img src="http://via.placeholder.com/1530x1020">
</div>
</div>
<div class="item-5">
<div class="bolimg">
<img src="http://via.placeholder.com/800x533">
</div>
</div>
<div class="item-6">
<div class="bolimg">
<img src="http://via.placeholder.com/800x533">
</div>
</div>
</section>
</body>
</html>以上是关于有关特定设计和文本叠加对齐的Flexbox问题的主要内容，如果未能解决你的问题，请参考以下文章