如何在html / css中垂直分隔组内容？

问题描述 投票：0回答：1

我正在尝试创建六个带有内容的单独盒子，但似乎我只能将它们水平分开而不是垂直分开。例如，盒子可以使用“宽度”水平间隔开，但是当我尝试移动像这个图像https://imgur.com/a/INcit中的盒子时，它们似乎不是垂直分开而是保持成对的两对。如果有人知道解决方案，我们将不胜感激。谢谢 ：）

body {
      background-color: #323232;
      max-width: 960px;
      padding: 0;
      margin: 0;
      font-family: Lato;
      }

      nav a {
      color: #fff;
      text-decoration: none;
      padding: 20px 25px;
      display: inline-block;
      }

      .fixed-header, .fixed-footer {
      background: #333;
      color: #fff;
      width: 100%;
      position: fixed;
      text-align: center;
      z-index: 10;
      background-color: #202020;
      }

      .fixed-header {
      top: 0;
      }

      .fixed-footer {
      bottom: 0;
      padding: 20px 0px;
      }

      .fixed-header a:hover {
      color: #c1c1c1;
      }

      .fixed-footer a {
      color: #fff;
      font-weight: lighter;
      text-decoration: none;
      }

      .group-content {
      max-width: 960px;
      text-align: center;
      }

      .group-content h3 {
      font-weight: normal;
      font-size: 20px;
      color: white;
      }

      .group-content p {
      font-weight: lighter;
      font-size: 20px;
      color: white;
      }

      .content {
      display: inline-block;
      width: 30%;
      background-color: #202020
      }

      @font-face {
      font-family: "Lato";
      font-weight: normal;
      font-style: normal;
      src: url('fonts/Lato-Regular.eot'),
      src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'),
      url('fonts/Lato-Regular.ttf') format('truetype'),
      url('fonts/Lato-Regular.woff') format('woff'),
      url('fonts/Lato-Regular.woff2') format('woff2');
      }

      @font-face {
      font-family: "Lato";
      font-weight: bold;
      font-style: normal;
      src: url('fonts/Lato-Bold.eot'),
      src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'),
      url('fonts/Lato-Bold.ttf') format('truetype'),
      url('fonts/Lato-Bold.woff') format('woff'),
      url('fonts/Lato-Bold.woff2') format('woff2');
      }

      @font-face {
      font-family: "Lato";
      font-weight: lighter;
      font-style: normal;
      src: url('fonts/Lato-Light.eot'),
      src: url('fonts/Lato-Light.eot?#iefix') format('embedded-opentype'),
      url('fonts/Lato-Light.ttf') format('truetype'),
      url('fonts/Lato-Light.woff') format('woff'),
      url('fonts/Lato-Light.woff2') format('woff2');
      }
<!DOCTYPE html>

<html lang="en">

 <head>
  <title>Kumo99.cf</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="icon" href="favicon.ico">
 </head>

 <body>

<div class="fixed-header">
   <nav>
     <a href="index.html">HOME</a>
     <a href="projects.html">PROJECTS</a>
     <a href="about.html">ABOUT</a>
   </nav>
</div>

<div class="fixed-footer">
 <a href="https://steamcommunity.com/id/kumo99">Made by Kumo © 2018</a>
</div>

<div class="group-content">
   <div class="content">
     <img src="https://i.imgur.com/Xde6duk.png">
     <h3>Arma 3: Exile Server</h3>
     <p>A project for improving the exile mod.</p>
   </div>

   <div class="content">
     <img src="https://i.imgur.com/Xde6duk.png">
     <h3>Reserved Space</h3>
     <p>Reserved space for future projects</p>
   </div>

   <div class="content">
     <img src="https://i.imgur.com/Xde6duk.png">
     <h3>Reserved Space</h3>
     <p>Reserved space for future projects</p>
   </div>

   <div class="content">
     <img src="https://i.imgur.com/Xde6duk.png">
     <h3>Reserved Space</h3>
     <p>Reserved space for future projects</p>
   </div>

   <div class="content">
     <img src="https://i.imgur.com/Xde6duk.png">
     <h3>Reserved Space</h3>
     <p>Reserved space for future projects</p>
   </div>

   <div class="content">
     <img src="https://i.imgur.com/Xde6duk.png">
     <h3>Reserved Space</h3>
     <p>Reserved space for future projects</p>
   </div>
 </div>

 </body>
</html>
html css alignment
1个回答
0
投票

我创建了一个jsfiddle与您的布局，并进行了更改，使其工作https://jsfiddle.net/rqvg3fd2/

基本上我添加了这个规则来限制每个块的内容大小：

.content >* {
    max-width: 220px;
    text-align: center;
    margin: 0;
}

然后我将最后3行添加到.group-content以使其成为弹性网格。注意flex-wrap：wrap，它使内容环绕。

.group-content {
    max-width: 960px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

我还将.content设为flex-grid作为列，并在顶部给它一个边距以隔开行

.content {
    width: 30%;
    background-color: #202020;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    align-items: center;
    margin-top: 20px;
}

最后，我在H3的顶部添加了一个边距，将其与红色框分开。

.group-content h3 {
    margin-top: 10px;
    font-weight: normal;
    font-size: 20px;
    color: white;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.