Трехстрочное изображение в одну колонку + текстовая боковая панель - PullRequest
Новая
       3

Трехстрочное изображение в одну колонку + текстовая боковая панель

1 голос
/ 07 мая 2020

Я HTML / CSS newb ie ищу совет о том, как создать трехстрочный макет с одним столбцом с изображениями и текстом рядом друг с другом. Я попытался создать отдельный код только для текстового столбца с использованием модели flexbox, и это сработало, но у меня все еще возникают проблемы с их выравниванием и правильным внешним видом. Хотите знать, может ли кто-нибудь еще предложить лучший способ создать столбец боковой панели с изображениями и текстом рядом друг с другом? Вот что у меня есть на данный момент. 

.imagecards {
  width: 450px;
  height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: auto;
}

.sidebarcontainer img {
  height: 250px;
  width: 250px;
  padding: 10px;
  margin: 20px 30px 0 0;
  object-fit: contain;
  align-self: flex-start;
}

.sidebarcontainer1 {
  padding: 10px;
  background-color: rgb(228, 228, 228);
}

.sidebarcontainer1 img {
  height: 250px;
  width: 250px;
}

`.sidebarcontainer_text` {
  flex: 1 1 auto;
  align-items: left;
  text-align: left;
}
<div class="imagecards">


  <div class="sidebarcontainer">
    <img src="resources/images/information-orientation.jpg">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>

  <div class="sidebarcontainer">
    <img src="resources/images/information-orientation.jpg">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>



  <div class="sidebarcontainer">
    <img src="resources/images/information-orientation.jpg">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Используйте также display: flex для контейнеров: 

/*QuickReset*/ * {margin:0; box-sizing: border-box; }

.imagecards {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: auto;
  width: 540px;
}
.sidebarcontainer {
  border: 1px solid #444;
  padding: 20px;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.sidebarcontainer img {
  width: 250px;
  min-height: 250px;
  object-fit: cover;
}

.sidebarcontainer_text {
  padding: 0 20px;
  flex: 1 1 auto;
}

.sidebarcontainer_text h1 {
  padding-bottom: 20px;
}
<div class="imagecards">

  <div class="sidebarcontainer">
    <img src="http://placekitten.com/400/300">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>

  <div class="sidebarcontainer">
    <img src="http://placekitten.com/300/300">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>

  <div class="sidebarcontainer">
    <img src="http://placekitten.com/450/300">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>

</div>
0 голосов
/ 08 мая 2020

Вам просто нужно добавить макет flexbox к родительскому из двух столбцов в строке. .sidebarcontainer { display: flex; } Направление по умолчанию - строка, поэтому текст размещается по правому краю друг относительно друга. Я добавил еще несколько правок и дополнений для стиля сниппета. 

.imagecards {
  width: 600px;
  height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: auto;
}

.sidebarcontainer img {
  height: 250px;
  width: 250px;
  padding: 10px;
  margin: 20px 30px 0 0;
  object-fit: contain;
  align-self: flex-start;
}

.sidebarcontainer1 {
  padding: 10px;
  background-color: rgb(228, 228, 228);
}

.sidebarcontainer1 img {
  height: 250px;
  width: 250px;
}

.sidebarcontainer_text {
  flex: 1 1 auto;
  align-items: left;
  text-align: left;
}

.sidebarcontainer {
  display: flex;
  align-items: center;
}
<div class="imagecards">


  <div class="sidebarcontainer">
    <img src="https://picsum.photos/200/300?grayscale">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>

  <div class="sidebarcontainer">
    <img src="https://picsum.photos/200/300?grayscale">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>



  <div class="sidebarcontainer">
    <img src="https://picsum.photos/200/300?grayscale">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>
</div>
...