使用 CSS Flexbox 时，我的图像没有连续对齐

My images are not aligning in a row when using CSS Flexbox

提问人：Mr House 提问时间：11/8/2023 最后编辑：Onur DoğanMr House 更新时间：11/8/2023 访问量：71

问：

我实际上正在遵循一个教程，我的代码模仿了这位讲师的确切代码。在讲师的网站上，他的图像完美对齐，而我的则没有。这是怎么回事？

CSS：

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--on-background);
  font-family: Arvo, sans-serif;
  background-color: var(--background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cpath fill='%2349bdc9' fill-opacity='0.3' d='M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'%3E%3C/path%3E%3C/svg%3E");
}

section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h1 {
  font-family: Acme, sans-serif;
  font-size: 100px;
  margin-bottom: 0;
}

h2 {
  color: var(--on-background-alt);
  font-size: 32px;
  font-weight: normal;
  text-align: center;
}

/* Navigation */
nav {
  z-index: 10;
  position: fixed;
  font-family: Lato, sans-serif;
  font-size: 24px;
  letter-spacing: 3px;
  padding: 25px;
  width: 100vw;
  background: rgb(255 255 255 / 50%);
}

a {
  margin-right: 25px;
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  font-weight: bold;
}

a:hover,
a:focus {
  color: var(--on-background);
  border-bottom: 3px solid;
}

/* Home Section */
.title-group {
  text-align: center;
}

/* About Section */
.about-container {
  display: flex;
}

.image-container {
  border: 1px solid var(--secondary-color);
  border-radius: 10px;
  padding: 10px 20px;
  margin-right: 25px;
  width: auto;
  background: var(--background);
  box-shadow: var(--box-shadow);
}

HTML格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light Dark Mode</title>
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Navigation -->
    <nav id="nav">
        <a href="#home">HOME</a>
        <a href="#about">ABOUT</a>
        <a href="#projects">PROJECTS</a>
        <a href="#contact">CONTACT</a>
    </nav>
    <!-- Home Section -->
    <section id="home">
        <div class="group">
            <h1>Custom Title Here</h1>
            <h2>Welcome to the Website!</h2>
        </div>
    </section>
    <!-- About Section -->
    <section id="about">
        <h1>Undraw Illustrations</h1>
        <div class="about-container">
            <div class="image-container">
                <h2>Web Innovation</h2>
                <img src="img/undraw_proud_coder_light.svg" alt="Proud Coder" id="image1">
            </div>
        </div>
        <div class="about-container">
            <div class="image-container">
                <h2>Problem Solving</h2>
                <img src="img/undraw_feeling_proud_light.svg" alt="Proud" id="image2">
            </div>
        </div>
        <div class="about-container">
            <div class="image-container">
                <h2>High Concept</h2>
                <img src="img/undraw_conceptual_idea_light.svg" alt="Idea" id="image3">
            </div>
        </div>
    </section>
    <!-- Projects Section -->
    <section id="projects">
        <h1>Buttons</h1>
    </section>
    <!-- Contact Section -->
    <section id="contact">

    </section>
    <!-- Script -->
    <script src="script.js"></script>
</body>
</html>

这是我的网站的样子

这是它应该的样子

我基于 GeeksforGeeks 尝试了这个，但仍然没有运气。如果我将 for my 和 .box 替换为我的.content.about-container.image container

<style> 
        header { 
            font-size: 20px; 
            align-items: center; 
            justify-content: center; 
            display: flex; 
            height: 10vh; 
            background-color: rgb(85, 123, 1); 
            color: white; 
        } 
  
        .content { 
            justify-content: space-around; 
            align-items: center; 
            display: flex; 
            flex-direction: row; 
        } 
  
        .box { 
            width: 73%; 
            height: 25%; 
            padding: 5px; 
        } 
</style>
HTML CSS 图像 FlexBox

评论

0赞 Onur Doğan 11/8/2023
你能在你的问题描述中分享它应该是什么样子的形象吗？
0赞 Mr House 11/8/2023
我更新了问题中的图片。
0赞 Onur Doğan 11/8/2023
您可以通过添加一个 div 作为所有关于容器 div 的父容器来实现。因此，它将涵盖所有这些图像容器 div。并赋予它以下样式： { display： flex; justify-content： center; align-items： center; flex-direction： row; }
0赞 Mr House 11/8/2023
这奏效了！谢谢。
0赞 Onur Doğan 11/8/2023
别客气。

答：

0赞 Onur Doğan 11/8/2023 #1

要将图像排成一行，需要为它们创建一个容器 div。因此，它应该涵盖除 h1 元素之外的所有图像容器 div。

HTML格式：

<!-- About Section -->
<section id="about">
   <h1>Undraw Illustrations</h1>
   <div class="about-main-container">  **Container added here**
      <div class="about-container">
          <div class="image-container">
              <h2>Web Innovation</h2>
               <img src="img/undraw_proud_coder_light.svg" alt="Proud Coder" id="image1">
          </div>
      </div>
      <div class="about-container">
          <div class="image-container">
              <h2>Problem Solving</h2>
              <img src="img/undraw_feeling_proud_light.svg" alt="Proud" id="image2">
          </div>
      </div>
      <div class="about-container">
          <div class="image-container">
              <h2>High Concept</h2>
              <img src="img/undraw_conceptual_idea_light.svg" alt="Idea" id="image3">
          </div>
      </div>
   </div>
</section>

CSS：

<style> 
   .about-main-container {
       display: flex;
       align-items: center; 
       justify-content: center; 
       flex-direction: row;
    }
</style>
-1赞 VISHAL SINGH 11/8/2023 #2

这是使用 Flex Layout 对齐行中图像的工作解决方案

<!-- About Section -->
    <section id="about">
        <h1>Undraw Illustrations</h1>
        <div class="image-section">
    <div class="image-container">
        <h2>Web Innovation</h2>
        <img src="https://picsum.photos/400" alt="Proud Coder" id="image1">
    </div>

    <div class="image-container">
        <h2>Problem Solving</h2>
        <img src="https://picsum.photos/400" alt="Proud" id="image2">
    </div>

    <div class="image-container">
        <h2>High Concept</h2>
        <img src="https://picsum.photos/400" alt="Idea" id="image3">
    </div>
</div>
       
    </section>

这是css

    section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.image-section {
  display: flex;
   align-items: center; 
   justify-content: center; 
   flex-direction: row;
}
    
.image-container {
  border: 1px solid var(--secondary-color);
  border-radius: 10px;
  padding: 10px 20px;
  margin-right: 25px;
  width: auto;
  background: var(--background);
  box-shadow: var(--box-shadow);
}

希望这会有所帮助

上一个：上传图片未显示

下一个：简单的 img 图库交叉淡入淡出效果