Как я могу создать этот тип макета html

Я хочу создать что-то подобное в макете, где значок выстраивается в линию с html, как я могу это сделать?

Я пробовал следующее без flexbox, но когда ширина сужается, все портится. Думаю, мне следует попробовать вместо этого flexbox. Надеюсь, это сработает.

хорошая версия испорченная версия

    .pageColumnMid{
margin-right:20px;
    float : left;
    clear : none;
    height : auto;
    width : auto;
    }
    .pageColumnLeft{
text-align:left;
    float : left;
    clear : none;
    height : auto;
    width : auto;
    }
    .pageColumnRight{
        margin-left:20px;
    float : left;
    clear : none;
    height : auto;
    width : auto;
    }
    .lineheight50{
        line-height: 40px!important;
    }

<body>

<div><div>
    <div class = "pageColumnMid"><span  class = "fas fa-user lineheight50" ></span> <br> <span  class = "fas fa-user lineheight50" ></span> <br> <span  class = "fas fa-user lineheight50" ></span> <br>
    </div>
    <div class = "pageColumnLeft lineheight50" >View, manage and publish your personal data <br> View, manage and store your Contacts <br> View your technicaldata* <br>
    </div>
    <div class = "pageColumnRight"></span><span  class = "fas fa-info lineheight50" ></span> <br>  <span  class = "fas fa-info lineheight50" ></span> <br>  <span  class = "fas fa-info lineheight50" ></span> <br>
    </div>
    </div>

</body>

Похоже, что он не адаптируется к мобильным устройствам, пожалуйста, проверьте мой новый вопрос об адаптации к мобильным устройствам.

— 08.05.2022 02:55

html layout alignment

07.05.2022 02:31

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

если вы хотите создать что-то вроде этого изображения

Вам нужно узнать больше о CSS Layout:

Как использовать и какая польза от использования тега div в HTML
Как создать сетку, используя Флексбокс CSS или Сетка CSS

Ссылки, которые я упоминаю, содержат полезный контент для вас, а на сайте w3schools вы можете поиграть с их игровой площадкой.

07.05.2022 02:40

Ответ принят как подходящий

Чтобы достичь вашего дизайна, вы можете сделать это, как показано ниже.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.d-flex {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
  flex-direction: column;
  width: 100%;/*can edit as per requirement*/
}

.d-flex .col .child {
  display: flex;
  flex-wrap: wrap;
}

.d-flex .col {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0;
  justify-content: space-between;
}

.d-flex p {
  padding: 0 1rem;
}

<!--ADD THIS LINE TO GET FONTAWESOME ICONS IN HEAD TAG-->
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class = "d-flex">
  <div class = "col">
    <div class = "child">
      <span class = "fas fa-user"></span>
      <p>View, manage and publish your personal data</p>
    </div>
    <span class = "fas fa-info"></span>
  </div>
  <div class = "col">
    <div class = "child">
      <span class = "fas fa-user"></span>
      <p>View, manage and store your Contacts</p>
    </div>
    <span class = "fas fa-info"></span>
  </div>
  <div class = "col">
    <div class = "child">
      <span class = "fas fa-user"></span>
      <p>View your technicaldata*</p>
    </div>
    <span class = "fas fa-info"></span>
  </div>
</div>

07.05.2022 08:23

Вы должны узнать о Flex в CSS Используя эти атрибуты, вы получите то, что хотите...

display: flex;  //Flexible Box Layout
flex-wrap: wrap; // box automatically go to next line
flex-direction: column;   // boxes are arranged int column order.

Игра с этими и другими атрибутами также поможет вам лучше понять гибкость. Спасибо

07.05.2022 08:34