Блог

Главная - Вопросы по программированию - Как сложить два изображения друг на друга так, чтобы они выстроились в линию в центре страницы

Как сложить два изображения друг на друга так, чтобы они выстроились в линию в центре страницы

#html #css #flexbox #css-grid #margin

Вопрос:

У меня есть три секции, и каждая из них находится в контейнере flex, как мне заставить секции укладываться друг на друга и оставаться в своем положении, когда окно просмотра меняет размер… Я думаю, что изображение объяснило бы это лучше, чем я. Первый образ-это то, чего я пытаюсь достичь, а второй образ-это то, что у меня есть сейчас. Это то, чего я пытаюсь достичь

Вот как это выглядит сейчас

 #story {
 background-color: var(--main-color);
}
#story h2 {
    letter-spacing: -0.015em;
    padding: 105px 0px 20px 100px;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 48px;
    letter-spacing: -0.015em;
}
.two-column {
    display: flex;
    flex-direction: row;
}
.two-column.reverse {
    flex-direction: row-reverse;
}
.two-column div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
#story-desc {
    font-size: 18px;
    margin: 0px 120px 0px 180px;
}
#story-desc-2 {
    font-size: 18px;
    margin: 0px 204px 0px 100px;
} 
   <!-- OUR STORY - TWO COLUMN FLEXBOX -->
  <section id="story" >
  <h2 >OUR STORY</h2>
  <section class="two-column">
    <div>   <img id="story-img-1" src="images/rundell.png" alt=""> </div>
    <div id="story-desc"> 
          <p>Ode was started by three Toronto born and bred sisters who fell in love with a street: Dundas St. West. <br><br>
              We dreamt of creating a place that celebrates the best of what the neighbourhood’s becoming and what it once was. So
              we made Ode for people like us. <br> <br>
              That means we’re not the Hyatt, the Marriott, or any of the Four Seasons. We cater only to our guests and answer only
              to our mother. This business is our baby, so we are dedicated to creating the best experience for everyone who walks
              through our front door.</p>
    </div>
</section>

<section class="two-column reverse">
  <div> <img id="story-img-2" src="images/tiff.png" alt=""> </div>
  <div id="story-desc-2">
    <p>Dundas West also known as “Little Portugal” is neither Little, nor is it Portugal. It’s a neighbourhood where old world     
              romance meets modern life: you'll find Portuguese bakeries selling juicy pastel de nata’s, hole in the wall galleries
               featuring local art, thrift shops where you can find the perfect ill advised chapeau, and restaurants whose cuisine can
              only be described as unruly.<br><br>
            Ode is a reflection of our neighbourhood and the people in it. No beige carpets, no black and white photos of three
            pebbles in a pile. Instead, modern rooms each with their own individual personality brought to life by local Toronto
            based artists, designers and manufacturers that we are proud to call our friends.</p>
  </div>
</section>

<section class="two-column">
  <div> <img id="story-img-3" src="images/building.png" alt=""> </div>
  <div id="story-desc">
    <p>Staying at interesting places should be within reach of those without a corporate credit card, and leave you with
      money in your pocket to explore.<br><br>
      By stripping back the things that you don’t need (think bathroom telephones, branded water, sewing kits,), we are able
      to provide you with more of the things you do need, at an affordable price.<br><br>
      Collect happy memories, not loyalty points.</p>
  </div>
</section>
</section>

Комментарии:

1. Это было бы отличным решением для CSS-сетки.

2. Я должен использовать сетку вместо гибкого трубопровода?

3. Я согласен, что для этого требуется CSS-сетка. Flexbox хорош, если вам нужно управлять только горизонтальным или вертикальным направлением. Если вам нужно управлять обоими одновременно, то вам следует использовать CSS-сетку.

Ответ №1:

 #story {
 background-color: var(--main-color);
}
#story h2 {
    letter-spacing: -0.015em;
    padding: 105px 0px 20px 100px;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 48px;
    letter-spacing: -0.015em;
}
.two-column {
    display: flex;
    flex-direction: row;
}
img {
    width: 500px;
    float: left;
}

.two-column.reverse {
    flex-direction: row-reverse;
}
.two-column div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
#story-desc {
    font-size: 18px;
    margin: 0px 120px 0px 180px;
}
#story-desc-2 {
    font-size: 18px;
    margin: 0px 204px 0px 100px;
} 
  <section id="story" >
  <h2 >OUR STORY</h2>
  <section class="two-column">
    <div>   <img id="story-img-1" src="https://e7.pngegg.com/pngimages/84/165/png-clipart-united-states-avatar-organization-information-user-avatar-service-computer-wallpaper.png" alt=""> </div>
    <div id="story-desc"> 
          <p>Ode was started by three Toronto born and bred sisters who fell in love with a street: Dundas St. West. <br><br>
              We dreamt of creating a place that celebrates the best of what the neighbourhood’s becoming and what it once was. So
              we made Ode for people like us. <br> <br>
              That means we’re not the Hyatt, the Marriott, or any of the Four Seasons. We cater only to our guests and answer only
              to our mother. This business is our baby, so we are dedicated to creating the best experience for everyone who walks
              through our front door.</p>
    </div>
</section>

<section class="two-column reverse">
  <div> <img id="story-img-2" src="https://e7.pngegg.com/pngimages/84/165/png-clipart-united-states-avatar-organization-information-user-avatar-service-computer-wallpaper.png" alt=""> </div>
  <div id="story-desc-2">
    <p>Dundas West also known as “Little Portugal” is neither Little, nor is it Portugal. It’s a neighbourhood where old world     
              romance meets modern life: you'll find Portuguese bakeries selling juicy pastel de nata’s, hole in the wall galleries
               featuring local art, thrift shops where you can find the perfect ill advised chapeau, and restaurants whose cuisine can
              only be described as unruly.<br><br>
            Ode is a reflection of our neighbourhood and the people in it. No beige carpets, no black and white photos of three
            pebbles in a pile. Instead, modern rooms each with their own individual personality brought to life by local Toronto
            based artists, designers and manufacturers that we are proud to call our friends.</p>
  </div>
</section>

<section class="two-column">
  <div> <img id="story-img-3" src="https://e7.pngegg.com/pngimages/84/165/png-clipart-united-states-avatar-organization-information-user-avatar-service-computer-wallpaper.png" alt=""> </div>
  <div id="story-desc">
    <p>Staying at interesting places should be within reach of those without a corporate credit card, and leave you with
      money in your pocket to explore.<br><br>
      By stripping back the things that you don’t need (think bathroom telephones, branded water, sewing kits,), we are able
      to provide you with more of the things you do need, at an affordable price.<br><br>
      Collect happy memories, not loyalty points.</p>
  </div>
</section>
</section>
Метки: ,