我如何创建这种类型的 html 布局

Question

我想在图标与 html 对齐的布局中创建类似的内容，我该如何完成？

Layout i would like to create

我在没有 flexbox 的情况下尝试了以下方法，但是当宽度变窄时它就乱七八糟了。我想我应该试试 flexbox。希望能奏效。

good version messed up version

    .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>

Answer 1

如果你想创建类似这张图片的东西

您需要进一步了解 CSS 布局：

How to use and what the benefit of using div tag in HTML
如何使用 Flexbox CSS or Grid CSS

我提到的链接包含对您有用的内容，您可以在 w3schools 网站上玩他们的游乐场。

Answer 2

要实现您的设计，您可以如下所示进行操作。

* {
  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>

Answer 3

您应该在 CSS 中了解 Flex 通过使用这些属性你会得到你想要的...

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

玩转这些属性，其他的也让你对flex更加清楚。谢谢

我如何创建这种类型的 html 布局

How can i create this type of html layout

html

layout

alignment