html - CSS 图像未正确对齐

Question

我想我的 CSS 有问题。我想让口红的图片与面部图像对齐，并且在它们下面都有一个指甲。

HTML

<center>
<div id="homepage-image preventOverflow homepageHero {{ section.settings.height }} {{ section.settings.color }} index-section">
  <div id="left">
    <img width=600px type="image/jpeg" src="{{ 'lipstickpink.jpg' | asset_url}}" />

   <!-- <img width=600px type="image/jpeg" src="{{ 'shadow.jpg' | asset_url}}" /> -->
  </div>
  <div id="right">
    <div id="top-right">
      <img width=900px type="image/png" src="{{ 'faceglam.png' | asset_url}}" />


    </div>
    <div id="bottom-right">
        <img width=600px type="image/jpeg" src="{{ '11_Vertigo_1024x1024.jpg' | asset_url}}" />

    </div>
  </div>
  </div> </center>

CSS

#container {
  height: 100%;
  width: 100%;
    padding-top: $gutter*3;
  padding-bottom: $gutter*2;


}

#left > img:nth-of-type(1) {
  height: 85vh;
  width: 70vw;
}
#left > img:nth-of-type(2) {
  height: 65vh;
  width: 49vw;
}
#left, #right {
  display: inline-block;
}
#top-right, #bottom-right {
  display: block;
}
#top-right > img:nth-of-type(1) {
  width: 100vw;
  height: 100vh;
}
#top-right > img:nth-of-type(2) {
  width: 35vw;
  height: 60vh;
}

#bottom-right > img:nth-of-type(1) {
  width: 60vw;
  height: 60vh;
}
#bottom-right > img:nth-of-type(2) {
  width: 20vw;
  height: 25vh;
}

我还提供了问题的图像:

Answer 1

还不完全清楚您希望它们如何(即朝哪个方向)对齐。 你有很多看似不必要的 div - 我想知道为什么..所以我调整了 HTML 和 CSS(使用来自互联网的自己的图像)

如果我弄错了顺序，只需调整图像即可。我调整了高度(显然可以重新调整)- 但希望您能理解一般要点!

希望对你有帮助

#container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding-top: $gutter*3;
  padding-bottom: $gutter*2;
}

#left{
margin-left:10%;
margin-right:10%;
}

#left > img:nth-of-type(1) {
 max-height:200px;
 padding:5px;
  height:auto;
}

#left > img:nth-of-type(2) {
 max-height:300px;
  padding:5px;
  height: 60vh;
}

#left,
#right {
  display: inline-block;
}

#right > img:nth-of-type(1) {
  max-height:300px;
  height: auto;
  margin-left:18vw;
  margin-right:18vw;
}

<div id="container">
  <div id="left">
    <img src="https://lh3.googleusercontent.com/czZtMqTum5GQOYL1NxogiEVZ57Zr5LG0chnil-p3YFTjl3WIQdrADqpaaATmyN-JGjey=h900" alt="face" />
    <img src="http://bpc.h-cdn.co/assets/16/38/480x480/gallery-1474299136-urban-decay-vice-pink-lipstick.jpg" alt="lipstick" />
  </div>
  <div id="right">
    <img src="http://www.vipera.com.pl/wp-content/uploads/2016/08/20zestawy_lakier__w_do_artystycznego_zdobienia_paznokci________artistic_manicure_set___219.jpg" alt="nails" />
  </div>
</div>

Fiddle