0
所以我花了很多時間試圖解決這個問題，但沒有任何工作。我有divs，我想每行都有3個，但是居中。我試過選擇第四個div並將其放到新的行中，但這不起作用。如何讓我的柔性電網有2行3列，但仍然居中？
我試圖閱讀指南，但不太明白。如果有人能幫我解釋它，所以我知道我做錯了什麼，這將是非常感激。
下面的圖片是我想要的全屏設備;我想每行總是有3列。
/* general styles */
body {
margin: 0;
}
h2 {
text-align: center;
text-decoration: overline underline;
text-decoration-color: #fff;
}
.col li {
list-style-type: none;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
/* these styles are called a clearfix (look it up) */
}
/* grid layout with flexbox */
.portfolio-col {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.col {
margin: 1% 1.3%;
/* equally space our boxes, instead of different left and right margins; specific numbers you can adjust */
flex-shrink: 0;
box-sizing: border-box;
justify-content: center;
}
.col ul {
padding-left: 0;
text-align: center;
width: 100%;
max-width: 250px;
/* same width and max-width as our images */
}
.col img {
border-style: solid;
border-color: blue;
width: 100%;
height: 100%;
max-width: 250px;
max-height: 250px;
}
.col:nth-child(4) {
background-color: aqua;
margin-left: 30%;
flex-direction: column;
flex-wrap: wrap;
margin: auto;
justify-content: center;
}<section class="port-folio" id="portfolio">
<div class="container">
<h2>MY PROJECTS</h2>
<div class="portfolio-col">
<div class="col span_1_of_3">
<img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
<ul class="project-info">
</ul>
</div>
<div class="col span_1_of_3">
<img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
<ul class="project-info">
<li>Name: Player</li>
<li>Created By: Doe</li>
<li>Date: August 2017</li>
<li>Language: Java</li>
<li><a href="">More Info</a></li>
</ul>
</div>
<div class="col span_1_of_3">
<img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
<ul class="project-info">
<li>Name: Game</li>
<li>Created By: Doe</li>
<li>Date: August 2017</li>
<li>Language: Game Maker Language (GML)</li>
<li><a href="">More Info</a></li>
</ul>
</div>
<div class="col span_1_of_3">
<img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
<ul class="project-info">
<li>Name: Game</li>
<li>Created By: Doe</li>
<li>Date: August 2017</li>
<li>Language: Game Maker Language (GML)</li>
<li><a href="">More Info</a></li>
</ul>
</div>
<div class="col span_1_of_3">
<img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
<ul class="project-info">
<li>Name: Game</li>
<li>Created By: Doe</li>
<li>Date: August 2017</li>
<li>Language: Game Maker Language (GML)</li>
<li><a href="">More Info</a></li>
</ul>
</div>
<br>
<div class="col span_1_of_3">
<img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
<ul class="project-info">
<li>Name: Game</li>
<li>Created By: Doe</li>
<li>Date: August 2017</li>
<li>Language: Game Maker Language (GML)</li>
<li><a href="">More Info</a></li>
</ul>
</div>
<div class="col span_1_of_3">
<img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
<ul class="project-info">
<li>Name: Game</li>
<li>Created By: Doe</li>
<li>Date: August 2017</li>
<li>Language: Game Maker Language (GML)</li>
<li><a href="">More Info</a></li>
</ul>
</div>
</div>
</div>
</section>
好吧只是讓我更好地瞭解，讓你改變了證明內容的某些屬性到空間，因爲它給你左右兩邊的空間，對嗎？和/ *增加了，3 * 750px + margin/gutter */margin/gutter是什麼？你在做3（列數*寬度250是750）還是增加100？我只是想知道，如果我想要說連2,4或8列或其他什麼。 – Cmi
@Cmi是的，這是正確的。而我錯誤地寫了3 * 750像素，應該是3 * 250像素（更新我的答案）。額外的100是爲物品留出空間，這也包括彌補'.col'上設置的左右5px的空白。這意味着額外的100不能小於（3 * 250px）+（3 *（5px + 5px）），否則將不適合，在這種情況下，連續3個項目 – LGSon
好的，謝謝你的所有幫助 – Cmi