html - 如何制作两列？

问题描述

（不得不在图片中隐藏我的姓名和面孔以获取隐私名称，并在 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;
}

标签： htmlcssflexboxbordermultiple-columns

您可能希望对列使用显示网格。但它也应该与 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>

html - 如何制作两列？

问题描述

解决方案

推荐阅读