如何制作两列？答案

【问题标题】：How to make two columns?如何制作两列？
【发布时间】：2021-10-14 19:16:17
【问题描述】：

CLICK HERE TO SEE WHAT IT LOOKS LIKE RIGHT NOW!!!

（不得不在图片中隐藏我的姓名和面孔以获取隐私名称，并在 html 中审查我的姓名）

1.所以基本上我想知道如何将文本和图像并排放置在两个单独的列中？

2.另外，我不知道如何删除标题和主要部分之间的空间。如果这看起来很荒谬，我很抱歉。

HTML（不是全部，只是重要的部分）：

<h4>My Portfolio</h4>
    
<nav>

  <ul>

    <li><a href="Home.html">Home</a></li>
    <li><a href="Education.html">Education</a></li>
    <li><a href="About Me.html">About Me</a></li>
    <li><a href="Contact.html">Contact</a></li>

  </ul>
      
</nav>

<div class="intro">
  
  <p>
    <b>Hi!</b>
    <br>
    My name is <b>insert my name here</b> and I am a first year <b>computer science</b> student.
  </p>

    <img src="Me.jpg" alt="A picture of me in front of pink flowers" width="500" height="500">

</div>

CSS：

body{margin-left: 10%; 
    margin-right: 10%;
    margin-top: 2em;
}

header{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

h4{
    padding: 20px;
}

.wrapper{
    background-color: #a989d6;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

nav ul{
    list-style-type: none;
}

nav a{
    text-decoration: none;
    padding: 20px;
}

nav li{
    display: inline;
}

.intro{
    text-align: center;
    align-items: center;
}

main{
    background-color: #dfcff6;
}

footer{
    background-color: #a989d6;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

【问题讨论】：

你反对使用bootstrap之类的框架吗？
您能否添加 HTML 的其余部分以重现您的第一张图片显示的内容？
我的意思是，我们还没有学到这一点，所以我真的不知道如何做到这一点
添加了html的另一部分
@arinaaa 在你的介绍 div 中创建 2 个 div，并在 CSS 中将它们的宽度设置为 50%。一旦你能够做到这一点，看看 HTML/CSS 中的网格布局以改进你当前的设计：w3schools.com/css/css_grid.asp

标签： html css flexbox border multiple-columns

【解决方案1】：

您可能希望对列使用显示网格。但它也应该适用于 display flex。

对于空间，删除边距和填充。

类似这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="content">content</div>
        <div class="content">content</div>
    </div>
    <style>

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

        .container{
            height: 100vh;
            background-color: yellow;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .content{
            display: grid;
            place-items: center;
            border: 1px solid blue;
        }
    </style>
</body>
</html>

【讨论】：

【解决方案2】：

这是我使用 flex 的解决方案：

.intro {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  text-align: center;
  background-color: #dfcff6;
}
body{
margin-left: 10%; 
  margin-right: 10%;
  margin-top: 2em;
}

<div class="intro">

  <p>
    <b>Hi!</b>
    <br> My name is <b>insert my name here</b> and I am a first year <b>computer science</b> student.
  </p>

  <img src="https://fotojoker.pl/blog/wp-content/uploads/autor-300x300.jpg" alt="Another photo because I have not original :)" width="500" height="500">

</div>

【讨论】：