как заставить встроенный блок начать новую строку

Question

У меня есть группа встроенных блоков, и я хочу после 4-го, чтобы она начала новую строку. Пока это мой проект, вроде как новый для CSS, так что любая помощь удивит вас!

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

HTML part

<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

Вы можете использовать макет 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 2

Это поможет добавить ширину в

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

Answer 3

Лучший способ - использовать display: flex и добавить свойство width в класс .item-showcase. Ваши блоки имеют ширину 290 пикселей, поэтому ширина .item-showcase должна составлять 1180 пикселей (1160 пикселей + 20 пикселей) , поля содержимого и элементов.

.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) , имейте в виду, что inline-block обрабатывается как встроенный элемент, поэтому браузер добавляет 4px в качестве полей для каждого inline-блока элемент.

Если вы хотите явно добавить поля к .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;
}