提问者:小点点

在css中尝试将两个堆叠的图像与一个单独的图像对齐


我试着把两张相互堆叠的图片放在一张完整的图片旁边,就像下面的图片--我试着把这两张相互堆叠的图片放在另一张单独的图片旁边。

谁能帮我这个。我不知道它的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


共1个答案

匿名用户

如果我没有理解错的话,您正在寻找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-itemsCSS属性。