Question

<!DOCTYPE html>


<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
  <div class="container">
    <h1>Our Peoples</h1>
    <div class="people">
        <h1>John</h1>
        <img src="https://imgur.com/a/n8JDD" alt="p1">
        <p>Months on ye at by esteem desire warmth former. Sure that that way gave any fond now. His boy middleton sir nor engrossed affection excellent. Dissimilar compliment cultivated preference eat sufficient may. Well next door soon we mr he four. Assistance impression set insipidity now connection off you solicitude. Under as seems we me stuff those style at. Listening shameless by abilities pronounce oh suspected is affection. Next it draw in draw much bred. </p>
        <div class="link">
            <ul>
                <li><a href="https://facebook.com"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://twitter.com"><i class="fa fa-twitter"></i></a></li>
                <li><a href="https://bd.linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram"></i></a></li>
            </ul>
        </div>
    </div>

    <div class="people">
        <h1>Jonathan</h1>
        <img src="https://imgur.com/a/ovWud" alt="p2">
        <p>His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the. Four and our ham west miss. Education shameless who middleton agreement how. We in found world chief is at means weeks smile.</p>
        <div class="link">
            <ul>
                <li><a href="https://facebook.com"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://twitter.com"><i class="fa fa-twitter"></i></a></li>
                <li><a href="https://bd.linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram"></i></a></li>
            </ul>
        </div>
    </div>

    <div class="people">
        <h1>Maria</h1>
        <img src="https://imgur.com/a/Ejh9X" alt="p3">
        <p>Gay one the what walk then she. Demesne mention promise you justice arrived way. Or increasing to in especially inquietude companions acceptance admiration. Outweigh it families distance wandered ye an. Mr unsatiable at literature connection favourable. We neglected mr perfectly continual dependent. </p>
        <div class="link">
            <ul>
                <li><a href="https://facebook.com"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://twitter.com"><i class="fa fa-twitter"></i></a></li>
                <li><a href="https://bd.linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram"></i></a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

body {
  margin: 0;
  background: grey;
}

.container {
  width: 70%;
  background: pink;
  margin: auto;
}

.people {
   width: 30.333%;
   background: white;
   display: inline-block;
   float: left;
   margin: 2px 5px;
   overflow: hidden;
   text-align: center;
}
.people img {
   width: 100px;
   height: 100px;
   border-radius: 50%;
}

我正在尝试创建一个人们的博客，他们的照片，描述和社交网络链接将可用。我创建了一个div（容器），然后创建了另一个div（人员），他们的整个配置文件将可用。总而言之，div（父母）中会有一些人的个人资料并排存在差距。我使用float以便每个配置文件并排放置但是在使用float之后整个容器div崩溃期望容器div中的h1元素。所以我该怎么做才能让每个项目并排保持在父div中保持相等的宽度和高度。

这是我的代码链接 - https://codepen.io/buzz_lightyear/pen/aVPQvq

Answer 1

你的意思是这个吗？如果没有，你能否添加一个关于你所指的内容的截图。

使用flexbox或CSS Grid有助于管理基于网格的布局，使元素在公共父容器中具有相同的属性，如下所示。下面的代码已经通过添加名为peoples的父容器进行了修改，该容器具有display:flex property到子容器people，以使flex:1的属性等同于{{随着浏览器的大小调整，它可以缩小和增长，并在子元素上保持相同的属性。

您可以通过设置绝对宽度（px，em等）或相对宽度（％，vw）使配置文件容器flex: 1 1 0不占用屏幕的整个宽度，并根据需要对齐它

peoples

body {
  margin: 0;
  background: grey;
}

.container {
  width: 100%;
  background: pink;
  
}
.peoples{
display: flex;
}

.people {
  width: 30.333%;
  background: white;
  margin: 2px 5px;
  overflow: hidden;
  text-align: center;
  flex:1;
}

.people img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Answer 2

执行此操作的一种方法是使用table标记来帮助您

table标记只是创建一个表格，您可以将任何内容放入其中并使用css进行样式设置。

我们将使用这个想法在一行中布置三个表格单元格（如代码笔中）连续

每一行都是由一对<tr>标签在html中创建的。在这一行内有三个表格单元格<td>（人们的三个部分）。代码如下所示：

<tr>
   <!--This is a table row-->
</tr>

我们将只创建一行（就像在代码笔中一样）并在其中放入三个表格单元格。每个人都会包含这个人的形象和一些关于他的文字：

<table>
   <tr>
      <td>
         <img src="profile_picture.png" alt="John Doe">
         <p>Text Here</p>
      </td>
      <td>
         <img src="profile_picture.png" alt="John Doe">
         <p>Text Here</p>
      </td>
      <td>
         <img src="profile_picture.png" alt="John Doe">
         <p>Text Here</p>
      </td>
   </tr>
</table>

你还说你希望每个容器之间有空间。这可以通过在<td>标签（表格部分）上设置填充来实现：

td{
  width: 100px;
  height: 200p;
  background-color: white;
  padding: 10px;
}

在div中创建不同的人员部分

2 个答案: