我无法实现该块,如屏幕截图所示。问题的实质是,在加号的中心及其图片或块周围,所有这些都应在所有屏幕上正常工作。如果您能帮助实施,将不胜感激。
.center-block{
position: relative;
width: 100%;
&:before{
position: absolute;
content: '';
width: 128px;
height: 1px;
background: #86b4d0;
top: 180px;
left: 100px;
transform: rotate(90deg);
}
&:after{
position: absolute;
content: '';
width: 128px;
height: 1px;
background: #86b4d0;
top: 160px;
left: 100px;
}
&__items{
margin-bottom: 20px;
&:last-child{
margin-bottom: 0;
}
a:not(:last-child){
margin-right: 40px;
}
}
}
<div class="center-block">
<div class="center-block__items">
<a href="#">
<img src="https://via.placeholder.com/150C/" alt=""></a>
<a href="#"><img src="https://via.placeholder.com/150C/" alt=""></a>
</div>
<div class="center-block__items">
<a href="#">
<img src="https://via.placeholder.com/150C/" alt=""></a>
<a href="#">
<img src="https://via.placeholder.com/150C/" alt="">
</a>
</div>
</div>
结果:
答案 0 :(得分:1)
HTML
<div class="center-block">
<div class="center-block__items">
<a href="#">
<img src="https://via.placeholder.com/150C/" alt=""></a>
<a href="#" style="margin-left: -17px;"><img src="https://via.placeholder.com/150C/" alt=""></a>
</div>
<div class="center-block__items">
<a href="#">
<img src="https://via.placeholder.com/150C/" alt=""></a>
<a href="#" style="margin-left: -17px;">
<img src="https://via.placeholder.com/150C/" alt="">
</a>
</div>
</div>
CSS
.center-block{
position: relative;
width: 100%;
&:before{
position: absolute;
content: '';
width: 128px;
height: 1px;
background: #86b4d0;
top: 180px;
left: 100px;
transform: rotate(90deg);
}
&:after{
position: absolute;
content: '';
width: 128px;
height: 1px;
background: #86b4d0;
top: 160px;
left: 100px;
}
&__items{
margin-bottom: 20px;
&:last-child{
margin-bottom: 0;
}
a:not(:last-child){
margin-right: 40px;
}
}
}
答案 1 :(得分:0)
尝试此工作!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
* {
box-sizing: border-box;
}
.center-block {
position: relative;
width: 100%;
max-width: 425px;
margin: 0 auto;
padding: 40px;
border-radius: 5px;
box-shadow: 0 0 5px #808080;
}
.center-block:before {
position: absolute;
content: '';
width: 128px;
height: 1px;
background: #86b4d0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center-block:after {
position: absolute;
content: '';
width: 1px;
height: 128px;
background: #86b4d0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center-block__items {
margin-bottom: 20px;
}
.center-block__items:last-child {
margin-bottom: 0;
}
.center-block__items a:not(:last-child) {
margin-right: 40px;
}
</style>
</head>
<body>
<div class="center-block">
<div class="center-block__items">
<a href="#">
<img src="https://via.placeholder.com/150C/" alt=""></a>
<a href="#"><img src="https://via.placeholder.com/150C/" alt=""></a>
</div>
<div class="center-block__items">
<a href="#">
<img src="https://via.placeholder.com/150C/" alt=""></a>
<a href="#">
<img src="https://via.placeholder.com/150C/" alt="">
</a>
</div>
</div>
</body>
</html>
答案 2 :(得分:0)
当然,您可以使用进一步的变换使旋转正确,但是...请尝试避免在之前/之后进行变换,而仅使用calc计算尺寸。
请参见摘要:
.center-block {
position: relative;
width: 100%;
text-align: center;
}
.center-block:before {
position: absolute;
content: '';
height: 1px;
background: #86b4d0;
top: calc(50% - 1px);
left: calc(50% - 64px);
right: calc(50% - 64px);
}
.center-block:after {
position: absolute;
content: '';
width: 1px;
background: #86b4d0;
top: calc(50% - 64px);
bottom: calc(50% - 64px);
left: calc(50% - 1px);
}
.center-block__items {
margin-bottom: 20px;
}
.center-block__items:last-child {
margin-bottom: 0;
}
.center-block__items a:not(:last-child) {
margin-right: 40px;
}
<div class="center-block">
<div class="center-block__items">
<a href="#">
<img src="https://via.placeholder.com/150C/" alt=""></a>
<a href="#"><img src="https://via.placeholder.com/150C/" alt=""></a>
</div>
<div class="center-block__items">
<a href="#">
<img src="https://via.placeholder.com/150C/" alt=""></a>
<a href="#">
<img src="https://via.placeholder.com/150C/" alt="">
</a>
</div>
</div>