0

На фотографии ясно, что нужно сделать. Знаю два способа сделать это - позиционирование и флексбокс. Не стал делать по своему, т.к. уйдет много кода. Здесь хочу узнать инной способ сделать это, но и ещё с меньшем кодом. Буду благодарен за помощь)введите сюда описание изображения

2
  • Сделай сетку с помощью Grid.
    – Vitali
    18 мая 2022 в 15:23
  • таблицы же есть =) 19 мая 2022 в 6:53

2 ответа 2

1

Так годится?

div {
  display: inline-block;
  width: 30%;
  border: 1px solid gray;
  padding: 5px 5px 5px 60px;
  box-sizing: border-box;
}

img {
  margin-left: -55px;
  float: left;
}

b {
  display: block;
}
<div>
  <img src="https://i.stack.imgur.com/RIAVG.jpg?s=48&g=1" />
  <b>Header</b>
  <span>text text text text text text text text </span>
</div>

<div>
  <img src="https://i.stack.imgur.com/RIAVG.jpg?s=48&g=1" />
  <b>Header</b>
  <span>text text text text text text text text </span>
</div>

<div>
  <img src="https://i.stack.imgur.com/RIAVG.jpg?s=48&g=1" />
  <b>Header</b>
  <span>text text text text text text text text </span>
</div>

0

Вариант на Flex.

.grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.grid .item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 0 1 auto;
}

.grid .item:not(:last-child) {
  margin-right: 10px;
}

.grid .icon {
  margin-right: 10px;
}

/* вместо иконки */
.grid .icon::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ccc;
}

.grid .text h3 {
  margin-top: 0;
}
<div class="grid">
  <div class="item">
    <div class="icon"></div>
    <div class="text">
      <h3>Idea Developing</h3>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
    </div>
  </div>
  
  <div class="item">
    <div class="icon"></div>
    <div class="text">
      <h3>Best Coding</h3>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
    </div>
  </div>
  
  <div class="item">
    <div class="icon"></div>
    <div class="text">
      <h3>Game Design</h3>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
    </div>
  </div>
</div>


Если нужно, чтобы картинка выравнивалась с текстом по высоте

.grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.grid .item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 0 1 auto;
}

.grid .item:not(:last-child) {
  margin-right: 10px;
}

.grid .title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.grid .icon {
  margin-right: 10px;
}

/* вместо иконки */
.grid .icon::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ccc;
}

.grid .title h3 {
  margin: 0;
}

.grid .text {
  padding-left: 40px; /* ширина иконки + её отступ */
  box-sizing: border-box;
}
<div class="grid">
  <div class="item">
    <div class="title">
      <div class="icon"></div>
      <h3>Idea Developing</h3>
    </div>
    <div class="text">
      <p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
    </div>
  </div>
  
  <div class="item">
    <div class="title">
      <div class="icon"></div>
      <h3>Best Coding</h3>
    </div>
    <div class="text">
      <p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
    </div>
  </div>
  
  <div class="item">
    <div class="title">
      <div class="icon"></div>
      <h3>Game Design</h3>
    </div>
    <div class="text">
      <p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.