如何让内联块从新行开始答案

【问题标题】：how to get Inline block to start on new line如何让内联块从新行开始
【发布时间】：2020-06-22 06:49:13
【问题描述】：

我有一组内联块，我希望在第 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;
}

谢谢大家，晚安？？？

【问题讨论】：

考虑使用flexbox
听起来更像是 Grid 而不是 inline-block 的工作
可以做类似.item-showcase:nth-child(4n-1)::after{display: block; content: '';} 或类似的事情吗？

标签： html css block inline display

【解决方案1】：

这将有助于在

中添加宽度

.item-showcase
{ 
  width: 50%;       
  margin-top:50px;
  margin-left:95px;
}
.showcase
{
  display:inline-block;
  background:red;
  padding:20px 20px 80px 20px;
}
#puppo
{
  width:250px;
    height:200px;
  object-fit: cover;
}

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

最好的方法是使用display: flex 并将width 属性添加到.item-showcase 类。您的块的宽度为 290px，因此 .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; 
}

但是如果你想使用 inline-blocks .item-showcase 的宽度应该是1172px (1160px + 12px)，请记住 inline-block 被视为一个内联元素，所以浏览器为每个 inline-block 元素添加 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;
}

【讨论】：