Позиционирование объектов. Проблема в обучении. Ступор

Question

Я только учусь верстать и, в процессе своего обучени, попал в ступор. Мне вообще не понятно как правильно спозиционировать объекты на экране.

Не понятно, использовать флексы или колонки, а если использовать, то как добиться нужного результата.

Answer 1

На примере простого, без лишних технологий первые два способа. Третий способ технология FlexBox

        h4,p { margin: 0;}
        img { width: 60px; position: relative; top: 50%; transform: translateY(-50%);}
        div.card > p.image { width: 60px; margin:0 20px 0 0; height: 100px;float: left;}
        div.table { width: 900px; }
        div.card { width: 50%; height: 100px; float: left;}
        div.discription { position: relative; top: 50%; transform: translateY(-50%); }

      <div class="table">
          <div class="card">
            <p class="image">
            <img src="https://yt3.ggpht.com/a/AATXAJwve2ig_p05wYyiytEMfRViDW6zHuX1nFCU5Q=s900-c-k-c0xffffffff-no-rj-mo" alt="">
              </p>
            <div class="discription">
            <h4>Lorem ipsum dolor sit amet.</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione architecto repellat?</p>
              </div>
          </div>
          <div class="card">
             <p class="image">
            <img src="https://yt3.ggpht.com/a/AATXAJwve2ig_p05wYyiytEMfRViDW6zHuX1nFCU5Q=s900-c-k-c0xffffffff-no-rj-mo" alt="">
              </p>
            <div class="discription">
            <h4>Lorem ipsum dolor sit amet.</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione architecto repellat?</p>
              </div>
          </div>
          
           <div class="card">
             <p class="image">
            <img src="https://yt3.ggpht.com/a/AATXAJwve2ig_p05wYyiytEMfRViDW6zHuX1nFCU5Q=s900-c-k-c0xffffffff-no-rj-mo" alt="">
              </p>
            <div class="discription">
            <h4>Lorem ipsum dolor sit amet.</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione architecto repellat?</p>
              </div>
          </div>
          
           <div class="card">
             <p class="image">
            <img src="https://yt3.ggpht.com/a/AATXAJwve2ig_p05wYyiytEMfRViDW6zHuX1nFCU5Q=s900-c-k-c0xffffffff-no-rj-mo" alt="">
              </p>
            <div class="discription">
            <h4>Lorem ipsum dolor sit amet.</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione architecto repellat?</p>
              </div>
          </div>
          
           <div class="card">
             <p class="image">
            <img src="https://yt3.ggpht.com/a/AATXAJwve2ig_p05wYyiytEMfRViDW6zHuX1nFCU5Q=s900-c-k-c0xffffffff-no-rj-mo" alt="">
              </p>
            <div class="discription">
            <h4>Lorem ipsum dolor sit amet.</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione architecto repellat?</p>
              </div>
          </div>
          
        </div>

Второй вариант с помощью таблицы:

h4 { margin: 0;}
img { width: 50px; margin-right: 20px;}
td.discription { width: 350px;}

<table>
  <tr>
    <td class="image"><img src="https://yt3.ggpht.com/a/AATXAJwve2ig_p05wYyiytEMfRViDW6zHuX1nFCU5Q=s900-c-k-c0xffffffff-no-rj-mo" alt=""></td>
    <td class="discription">
      <h4>Lorem ipsum dolor sit amet.</h4>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque neque quae eligendi?</p>
    </td>
    
     <td class="image"><img src="https://yt3.ggpht.com/a/AATXAJwve2ig_p05wYyiytEMfRViDW6zHuX1nFCU5Q=s900-c-k-c0xffffffff-no-rj-mo" alt=""></td>
    <td class="discription">
      <h4>Lorem ipsum dolor sit amet.</h4>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque neque quae eligendi?</p>
    </td>
  </tr>
</table>

Третий способ с помощью технологии FlexBox

h4 { margin: 0;}
img { width: 50px; margin-right: 20px;}
p.image { float: left; }
div.block-card { display: flex; flex-wrap: wrap; width: 700px;}
div.card { width: 50%; margin-top: 10px;}

<div class="block-card">
  <div class="card">
    <p class="image"><img src="https://yt3.ggpht.com/a/AATXAJwve2ig_p05wYyiytEMfRViDW6zHuX1nFCU5Q=s900-c-k-c0xffffffff-no-rj-mo" alt=""></p>
    <div class="discription">
      <h4>Lorem ipsum dolor sit amet.</h4>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo nemo laboriosam sit.</p>
    </div>
  </div>
  
  <div class="card">
    <p class="image"><img src="https://yt3.ggpht.com/a/AATXAJwve2ig_p05wYyiytEMfRViDW6zHuX1nFCU5Q=s900-c-k-c0xffffffff-no-rj-mo" alt=""></p>
    <div class="discription">
      <h4>Lorem ipsum dolor sit amet.</h4>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo nemo laboriosam sit.</p>
    </div>
  </div>
  
  <div class="card">
    <p class="image"><img src="https://yt3.ggpht.com/a/AATXAJwve2ig_p05wYyiytEMfRViDW6zHuX1nFCU5Q=s900-c-k-c0xffffffff-no-rj-mo" alt=""></p>
    <div class="discription">
      <h4>Lorem ipsum dolor sit amet.</h4>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo nemo laboriosam sit.</p>
    </div>
  </div>
  
  <div class="card">
    <p class="image"><img src="https://yt3.ggpht.com/a/AATXAJwve2ig_p05wYyiytEMfRViDW6zHuX1nFCU5Q=s900-c-k-c0xffffffff-no-rj-mo" alt=""></p>
    <div class="discription">
      <h4>Lorem ipsum dolor sit amet.</h4>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo nemo laboriosam sit.</p>
    </div>
  </div>
</div>

Answer 2

Или просто адаптивно на флексах

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

:root {
  --marginRightCard: 30px;
  --heightAndWidthImg: 130px;
}

.container {
  padding: 0 15px;
  margin: 0 auto;
  max-width: 1000px;
}

img {
  display: block;
  max-width: 100%;
}

.flex__wrapper {
  display: flex;
  flex-wrap: wrap;
}

.card {
  display: flex;
  align-items: center;
  max-width: calc( 50% - var(--marginRightCard) / 2);
  padding: 10px 0;
  margin-bottom: 20px;
}

.card:nth-child(2n+1) {
  margin-right: var(--marginRightCard);
}

.card__img {
  max-width: var(--heightAndWidthImg);
  min-width: var(--heightAndWidthImg);
  height: var(--heightAndWidthImg);
  margin-right: 20px;
}

.card__img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.card__title {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}

@media (max-width: 850px) {
  .card {
    max-width: none;
  }
  .card:nth-child(2n+1) {
    margin-right: 0;
  }
}

@media (max-width: 450px) {
  .card {
    flex-direction: column;
    margin-bottom: 30px;
  }
  .card__img {
    margin: 0 0 10px 0;
    min-width: auto;
    height: auto;
  }
  .card__title {
    text-align: center;
  }
}

<div class="container">
  <div class="flex__wrapper">
    <div class="card">
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
      <div class="card__content">
        <div class="card__title">Заголовок</div>
        <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio laboriosam doloribus, itaque fugit veniam eligendi sequi ut esse ipsa quasi. Ab minima voluptatibus doloribus fugiat commodi? Sint deleniti, dicta sequi!</div>
      </div>
    </div>
    <div class="card">
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
      <div class="card__content">
        <div class="card__title">Заголовок</div>
        <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis, ab quos ut cum fugit labore omnis dolor dolores minus tempore vitae odit facilis deleniti ullam illum consectetur facere non?</div>
      </div>
    </div>
    <div class="card">
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
      <div class="card__content">
        <div class="card__title">Заголовок</div>
        <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem aut neque cumque asperiores nesciunt ipsam nisi possimus obcaecati, sit ab quasi nobis deleniti sapiente quo! Sapiente esse tempore quis laborum.</div>
      </div>
    </div>
    <div class="card">
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
      <div class="card__content">
        <div class="card__title">Заголовок</div>
        <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rem veritatis ad commodi, tempora porro quibusdam deleniti velit corrupti, eum tempore voluptates sed dignissimos facilis aut vitae obcaecati architecto laudantium.</div>
      </div>
    </div>
    <div class="card">
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
      <div class="card__content">
        <div class="card__title">Заголовок</div>
        <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, ipsam quisquam velit voluptas illum labore atque nostrum laudantium minus optio voluptatibus! Veniam eligendi at nostrum, aspernatur perferendis consequuntur officia sapiente.</div>
      </div>
    </div>
    <div class="card">
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
      <div class="card__content">
        <div class="card__title">Заголовок</div>
        <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi officiis obcaecati assumenda consequuntur aperiam alias, adipisci quam esse suscipit illum, cupiditate et ducimus, optio consequatur laborum illo ea? Ad, minima?</div>
      </div>
    </div>
    <div class="card">
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
      <div class="card__content">
        <div class="card__title">Заголовок</div>
        <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus delectus dicta itaque soluta dolore quidem illum, consequuntur fuga. Eveniet praesentium quia perferendis. Officiis quaerat vero itaque deleniti, vel eos earum.</div>
      </div>
    </div>
    <div class="card">
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
      <div class="card__content">
        <div class="card__title">Заголовок</div>
        <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In deleniti facere tempora pariatur dolore ipsa commodi assumenda eaque placeat animi, a possimus aperiam. Qui expedita harum saepe adipisci, blanditiis, sint?</div>
      </div>
    </div>
  </div>
</div>

как сделать задний фон в виде круга при помощи css

В этом примере я сказал что для изображения сделай border-radius: 50% Это даёт эту округлость для img

БЛОГ НА HUSL

Позиционирование объектов. Проблема в обучении. Ступор

Ответы (2 шт):