html/cssでグループコンテンツを縦に分割する方法は？

私はinでコンテンツを持つ6つの個々のボックスを作成しようとしていますが、私はそれらを垂直にではなく水平にしか分離できないようです。たとえば、ボックスは 'width'を使って水平に離して配置することができますが、この画像のようにボックスを移動しようとすると、垂直方向に分離して2つのペアになることはありません。誰かが解決策を知っていれば、それは非常に高く評価されるでしょう。感謝:)html/cssでグループコンテンツを縦に分割する方法は？

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>

出典

2017-12-28 Gon Supreme

'.content {margin-bottom：4px;} ' – Chiller

ボックスの背景色が消えます。 –

私は基本的に私は、それぞれのコンテンツのサイズを制限するために、このルールを追加したレイアウトでjsfiddleを作成し、それが https://jsfiddle.net/rqvg3fd2/

を動作させるために変更を加えましたブロック：

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

次に、最後の3行を.group-contentに追加しましたそれをフレックスグリッドにする。フレックスラップ：ラップがコンテンツをラップアラウンドさせることに注意してください。

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

私も列として.contentフレックスグリッドを作り、行

.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; 
}

出典

2017-12-28 19:12:34

詳細な回答をいただきありがとうございます。問題を解決しただけでなく、新しいことも学びました。 –

私の答えは正しかったので、受け入れられたとマークしてください。 –

html/cssでグループコンテンツを縦に分割する方法は？

答えて

関連する問題