如何获得内联块以在新行上开始

Question

我有一组嵌入式块，我希望在第4个块之后开始新的一行。到目前为止，这是我的项目，对CSS来说有点新，因此任何帮助都令人惊奇！

https://codepen.io/lumin-little/pen/poJpOMN

HTML部分

<div class="item-showcase">
    <article class="showcase">
        <div class="image">
          <img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80.jpg" id="puppo">
        </div>
        <h3>Example text #1</h3>
    </article>
    <div class="showcase">
        <div class="image">
          <img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80.jpg" id="puppo">
        </div>
        <h3>Example text #2</h3>
    </div>
    <article class="showcase">
        <div class="image">
          <img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80.jpg" id="puppo">
        </div>
        <h3>Example text #3</h3>
    </article>
    <article class="showcase">
        <div class="image">
          <img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80.jpg" id="puppo">
        </div>
        <h3>Example text #4</h3>
    </article>
    <article class="showcase">
        <div class="image">
          <img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80.jpg" id="puppo">
        </div>
        <h3>Example text #5</h3>
    </article>
    <article class="showcase">
        <div class="image">
          <img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80.jpg" id="puppo">
        </div>
        <h3>Example text #6</h3>
    </article>
</div>

CSS部分

.item-showcase
{
  padding-top:50px;
  padding-left:100px;
}

.showcase
{
  display:inline-block;
  background:red;
  padding:20px 20px 80px 20px;
}

#puppo
{
  width:250px;
  height:200px;
  object-fit: cover;
}

.showcase:nth-child(4n) 
{
  background:green;
}

谢谢大家，晚上好😄

Answer 1

最佳方法是使用display: flex并将width属性添加到.item-showcase类。您的块的宽度为290像素，因此.item-showcase的宽度应为1180px（1160px + 20px），内容加元素边距。

.item-showcase
{
  width: 1180px;
  display: flex;
  flex-wrap: wrap;
  margin-top:50px;
  margin-left:95px;
}
.showcase
{  
  background:red;
  padding:20px 20px 80px 20px;
  margin-left: 5px;
  margin-bottom: 5px;
}
#puppo
{
  width:250px;
    height:200px;
  object-fit: cover;
}

.showcase:nth-child(4)
{
  background:green; 
}

但是，如果要使用内联块，则.item-showcase的宽度应为1172px（1160px + 12px），请记住，将内联块视为内联元素，因此浏览器会添加4px作为每个内联块元素的边距。

如果要向.showcase显式添加边距，则应删除HTML中子元素之间的空格。

CSS：

.item-showcase {
  width: 1172px;
  padding-top:50px;
  padding-left:100px;
}
.showcase {
  display:inline-block;
  background:red;
  padding:20px 20px 80px 20px;
  margin-bottom: 4px;
}

Answer 2

您可以使用flexbox布局来实现此目的。

 .item-showcase
{
  padding-top: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: space-between;
}
.showcase
{
  display: block;
  background: red;
  width: 25%;
}

如果要获取装订线（即块之间的空间），您必须花一点时间。

[基本上，在父元素上，您告诉它将其子级对齐，并在其宽度超过子级时对其进行“包装”。对于孩子，您告诉他们占父母的25％。

顺便说一下，这两个教育游戏非常适合学习flexbox和grid：http://flexboxfroggy.com/https://codepip.com/games/grid-garden/

Answer 3

{
  padding-top:50px;
  padding-left:100px;
  /* Add */
  display: flex;
  flex-wrap: wrap;
}