如何使图像连续答案

【问题标题】：How can I make the images in a row如何使图像连续
【发布时间】：2021-07-21 01:43:15
【问题描述】：

嘿，我是第一次为网站编程，但遇到了一个小问题。问题是我无法连续制作图像。

应该如何：

怎么样：

这是我的代码：

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  font-size: 32px;
  font-weight: bold;
  background-color: rgb(35, 50, 64);
  color: white;
}

.social-images {
  text-align: left;
}

#logo-name {
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-right: 2200px;
  padding-top: 44px;
}

#top {
  text-align: right;
  padding-top: -20px;
}

#navigation a {
  text-align: right;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  margin: 15px;
  text-align: right;
}

#navigation a:hover {
  color: rgb(90, 176, 247);
}

#image img {
  >width: 100%;
  >margin-top: 16px;
  >margin-bottom: 16px;
  >height: auto;
}

#main {
  text-align: center;
  max-width: 800px;
  margin: auto;
  padding: 16px;
}

#footer {
  text-align: center;
  padding: 25px;
  color: grey;
}

html {
  scroll-behavior: smooth;
}

<!DOCTYPE html>

<html>

<head>
  <title>Leon Kannenberg</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, intial-scale=1">
</head>

<body>
  <div id="top">
    <div id="logo-name">Leon Kannenberg</div>
    <div id="navigation">
      <a href="#top">Startseite</a>
      <a href="#about-us">Über mich</a>
      <a href="#projects">Projekte</a> <a href="#social">Social</a>
      <a href="#contacts">Kontakt</a>
    </div>
    <div id="image">
      <img src="image.jpg" alt="Ein sehr schönes Bild">
    </div>
  </div>
  <div id="main">
    <section id="main">
      <section id="about-us"></section>
      <h2>Über mich</h2>
      <p>
        Hallo! Mein Name ist Leon Kannenberg. Ich bin 18 Jahre alt und ein Inforamtik interessierter Mensch. Dementsprechend habe ich diese Website komplett alleine Programmiert. Die Website soll meine Begeisterung für die Inforamtikwelt wiederspiegeln. Ich habe
        bereits mehrere Projekte in bearbeitung die bald bei dem Gleichnamigen Berreich reingestellt werden. Hoffentlich gefällt dir meine Website und ich wünsche dir hier noch viel Spaß drauf!
      </p>
      <section id="projects"></section>
      <h2>Projekte</h2>
      <p>
        Coming Soon!
      </p>
    </section>
    <section id="social"></section>
    <h2>Social</h2>
    <p>
      <div class="social-images">
        <img class="img-instagram" src="instagram.png" width="500" height="400" alt="Instagram von Leon Kannenberg" />
        <img class="img-facebook" src="facebook.png" width="500" height="400" alt="Facebook von Leon Kannenberg" />
        <img class="img-twitter" src="twitter.png" width="500" height="400" alt="Twitter von Leon Kannenberg" />
      </div>
    </p>
    <section id="contacts"></section>
    <h2>Kontakt</h2>
    <p>
      Kontakt page Coming Soon!
    </p>
  </div>
  <div id="footer">
    Copyright 2021 | Leon Kannenberg
  </div>
</body>

</html>

【问题讨论】：

您好，< 用于添加引用，您可以使用{ } 图标插入代码块
同样<div>标签也不能在<p>标签内

标签： html css image web

【解决方案1】：

在 css 中学习 flexbox 或 grid，例如在 w3 学校：
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp

【讨论】：

【解决方案2】：

你可以使用flexbox:

.social-images{
  display: flex;
}

display: inline-block 也可以。访问CSS - Display了解更多信息。

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  font-size: 32px;
  font-weight: bold;
  background-color: rgb(35, 50, 64);
  color: white;
}

.social-images {
  display: flex;
  justify-content: space-around;
  text-align: left;
}

#logo-name {
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-right: 2200px;
  padding-top: 44px;
}

#top {
  text-align: right;
  padding-top: -20px;
}

#navigation a {
  text-align: right;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  margin: 15px;
  text-align: right;
}

#navigation a:hover {
  color: rgb(90, 176, 247);
}

#image img {
  >width: 100%;
  >margin-top: 16px;
  >margin-bottom: 16px;
  >height: auto;
}

#main {
  text-align: center;
  max-width: 800px;
  margin: auto;
  padding: 16px;
}

#footer {
  text-align: center;
  padding: 25px;
  color: grey;
}

html {
  scroll-behavior: smooth;
}

<!DOCTYPE html>

<html>

<head>
  <title>Leon Kannenberg</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, intial-scale=1">
</head>

<body>
  <div id="top">
    <div id="logo-name">Leon Kannenberg</div>
    <div id="navigation">
      <a href="#top">Startseite</a>
      <a href="#about-us">Über mich</a>
      <a href="#projects">Projekte</a> <a href="#social">Social</a>
      <a href="#contacts">Kontakt</a>
    </div>
    <div id="image">
      <img src="image.jpg" alt="Ein sehr schönes Bild">
    </div>
  </div>
  <div id="main">
    <section id="main">
      <section id="about-us"></section>
      <h2>Über mich</h2>
      <p>
        Hallo! Mein Name ist Leon Kannenberg. Ich bin 18 Jahre alt und ein Inforamtik interessierter Mensch. Dementsprechend habe ich diese Website komplett alleine Programmiert. Die Website soll meine Begeisterung für die Inforamtikwelt wiederspiegeln. Ich habe
        bereits mehrere Projekte in bearbeitung die bald bei dem Gleichnamigen Berreich reingestellt werden. Hoffentlich gefällt dir meine Website und ich wünsche dir hier noch viel Spaß drauf!
      </p>
      <section id="projects"></section>
      <h2>Projekte</h2>
      <p>
        Coming Soon!
      </p>
    </section>
    <section id="social"></section>
    <h2>Social</h2>
    <p>
      <div class="social-images">
        <img class="img-instagram" src="https://picsum.photos/200/300" width="500" height="400" alt="Instagram von Leon Kannenberg" />
        <img class="img-facebook" src="https://picsum.photos/200/300" width="500" height="400" alt="Facebook von Leon Kannenberg" />
        <img class="img-twitter" src="https://picsum.photos/200/300" width="500" height="400" alt="Twitter von Leon Kannenberg" />
      </div>
    </p>
    <section id="contacts"></section>
    <h2>Kontakt</h2>
    <p>
      Kontakt page Coming Soon!
    </p>
  </div>
  <div id="footer">
    Copyright 2021 | Leon Kannenberg
  </div>
</body>

</html>

【讨论】：

好吧，它几乎在右边，所以我怎样才能将它居中并在图像之间留出一些空间？
尝试在上面添加justify-content: space-between。您可以在css-tricks.com/snippets/css/a-guide-to-flexbox 看到所有可能的值和插图
在答案中添加了一个示例。就我粉丝所见，图像已经在页面上居中。您还可以使用简单的margin 创建间距
它不是这样的：imgur.com/a/1phF10Q
您的#main { max-width: 800px; 不允许它有足够的宽度。要么缩小图像，要么扩大内容宽度。

【解决方案3】：

父容器

display: flex;

img 容器

display: flex;
flex-direction: column;
flex-wrap: nowrap; /* you can use wrap in case you want it to overflow*/

【讨论】：