html - 在 div 中创建不同部分的人-6ren

html - 在 div 中创建不同部分的人

转载作者：行者123 更新时间：2023-11-28 02:32:32

<!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(parent)中会有一些人的个人资料并排放置，有一点差距。我正在使用 float 以便每个配置文件并排放置，但在使用 float 之后整个容器 div 崩溃期望容器 div 中的 h1 元素。那么我应该怎么做才能使每个元素并排放置，在其父 div 中保持相同的宽度和高度。

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

最佳答案

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

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

您可以通过设置绝对宽度(px、em 等)或相对宽度(%,vw)使配置文件容器 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%;
}

<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="peoples">
    <div class="people">
      <h1>John</h1>
      <img src="http://www.math.uni-frankfurt.de/~person/_4170854.jpg" 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://www.jamsadr.com/images/neutrals/person-donald-900x1080.jpg" 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://engineering.unl.edu/images/staff/Kayla_Person-small.jpg" 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>
  </div>
</body>

</html>

关于html - 在 div 中创建不同部分的人，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47619501/

文章推荐： c++ - 编译错误Visual Studio 2013

文章推荐： javascript - 谷歌地图 JSP

文章推荐： C++如果文本文件是否包含特定单词

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

html - 在 div 中创建不同部分的人