我试着把两张相互堆叠的图片放在一张完整的图片旁边,就像下面的图片--我试着把这两张相互堆叠的图片放在另一张单独的图片旁边。
谁能帮我这个。我不知道它的flexbox或我应该使用定位来解决这个问题,因为图像被卡在下面,我试图使图像向上,也使他们对齐的权利旁边的孤立的图像(注:我试过定位,但由于某些原因没有工作)
null
.lone-image {
display: flex;
}
.images {
background-size: cover;
background-image: url(xii.jpg);
width: 45%;
height: 520px;
position: relative;
left: 50px;
}
.Xiaomi h1 {
position: absolute;
color: white;
font-weight: normal;
font-size: 40px;
bottom: 70%;
right: 60%;
}
.xiaomi-text {
color: white;
position: absolute;
top: 25%;
left: 6%;
font-size: 12px;
}
.Buy-now button {
background-color: #706c6c;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
position: absolute;
bottom: 60%;
right: 76%;
}
.images2 {
background-image: url(canon.jpg);
background-size: cover;
width: 37%;
height: 280px;
position: relative;
margin-bottom: 10px;
}
.Canon h1 {
font-weight: normal;
font-size: 40px;
position: absolute;
top: 40px;
left: 15px;
}
.button2 button {
color: white;
background-color: #706c6c;
padding: 6px 12px;
border: none;
position: absolute;
font-size: 16px;
top: 150px;
left: 15px;
}
.images3 {
background-image: url(dell.jpg);
background-size: cover;
width: 37%;
height: 280px;
flex-wrap: wrap;
}
.stacked-image {
display: flex;
flex-flow: column;
align-items: flex-end;
}
<div class="lone-image">
<div class="images">
<div class="Xiaomi">
<h1> Xiaomi X15</h1>
</div>
<div class="Buy-now">
<button> BUY NOW</button>
</div>
<div class="xiaomi-text">
<p> Discover your passion in the phone of dreams so order now</p>
</div>
</div>
</div>
<div class="stacked-image">
<div class="images2">
<div class="Canon">
<h1>CANON MP56 </h1>
</div>
<div class="button2">
<button> BUY NOW</button>
</div>
</div>
<div class="images3">
<div class="Dell">
<h1>Dell X5-MWS</h1>
</div>
<div class="button3">
<button> BUY NOW</button>
</div>
</div>
</div>
null
如果我没有理解错的话,您正在寻找Flexbox。下面是一个基本的例子:
JSFiddle
<div class="parent">
<img src="" alt="left"/>
<div class="child">
<img src="" alt="hi"/>
<img src="" alt="hi"/>
</div>
</div>
.parent {
display: flex;
}
.child {
display: flex;
flex-direction: column;
}
如果您希望更改它们的垂直对齐方式,您可以使用parent
类上的align-items
CSS属性。