Question

我正在尝试使用它，以便图像显示在我创建的预制盒中。现在，它们太宽了，超出了我的50em宽度。另外，它们是非常高的高度，我不知道这仅仅是图片或代码的变化。我为此使用flexbox。

现在，没有图像在其中，看起来它们都使用了自动换行功能，但是一旦插入图像，它就会停止正常工作。

main{
    width:50em;
    border-style:solid;
    display:flex;
}

.images{
    display: flex;
    flex-direction: row;
    flex: 1 1 25em;
    flex-wrap: wrap;
    flex-grow: 1;
}

<!DOCTYPE html>
<html>

<head>
    <!-- A meta element naming the Unicode character set you want the browser to use (UTF-8). -->
    <meta charset="UTF-8">
    <!-- A link to reset -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="flex.css">
</head>
    
<body>
    <main class="wrapper">
        
        <header id="images">
            <img src="student-misc-02.jpg" alt="student1">
            <img src="student-misc-06.jpg" alt="student1">
            <img src="student-misc-08.jpg" alt="student1">
            <img src="student-misc-12.jpg" alt="student1">
            <img src="student-misc-19.jpg" alt="student1">
            <img src="student-misc-20.jpg" alt="student1">
        </header>    
        
    </main>
    
</body>

</html>

Answer 1

我已修复CSS代码以匹配您的HTML代码。另外，在某些编辑中，您显示为3列，最后一条CSS规则尝试重现这3列的布局。

main {
  width: 50em;
  border-style: solid;
  display: flex;
}

/* fix the selector to match yout html code using id, not class */
#images {
  display: flex;
  flex-direction: row;
  flex: 1 1 25rem;
  flex-wrap: wrap;
  flex-grow: 1;
}

/* If you need the three columns as your original question */
#images img {
  width: 33%; 
  margin: auto;
}

<!DOCTYPE html>
<html>

<head>
  <!-- A meta element naming the Unicode character set you want the browser to use (UTF-8). -->
  <meta charset="UTF-8">
  <!-- A link to reset -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="flex.css">
</head>

<body>
  <main class="wrapper">

    <header id="images">
      <img src="http://lorempixel.com/400/200" alt="student1">
      <img src="http://lorempixel.com/400/200" alt="student1">
      <img src="http://lorempixel.com/400/200" alt="student1">
      <img src="http://lorempixel.com/400/200" alt="student1">
      <img src="http://lorempixel.com/400/200" alt="student1">
      <img src="http://lorempixel.com/400/200" alt="student1">
    </header>

    <section class="title">
      <!--<h1>XD Rountable 2019 Event Calendar</h1>-->
    </section>

    <footer>
    </footer>

  </main>

</body>

</html>

使用Flex Box在Box HTML CSS中组织材料

1 个答案: