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