css多列和行文章

Question

我创建了一个包含多篇文章的部分，但它没有按预期工作。我想要一个有多行的多列（最多3列） 但是当我启动我的剧本时，它并没有按照我的预期行事，当我在第一行中有3篇文章时，我只有一篇在第二行（预期为3）。
It does this (image)
But I expect this (image)
代码：

＆＃13;

＆＃13;

.lesarticles {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

article {
  border: 1px solid #52535C;
  margin: 20px;
  text-align: center;
  border-radius: 1%;
  list-style: none;
  width: 130px;
  float: left;
  overflow: hidden;
}

article p {
  text-align: left;
  width: 80%;
  margin: auto;
}

article img {
  max-width: 100%;
  height: auto;
}

＆＃13;

<div class="lesarticles">
  <article>
    <img src="img/img.png">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </article>

  <article>
    <img src="img/img2.png">
    <h2>Title 2</h2>
    <p>Ut rutrum nulla ex, id vulputate libero dignissim eget. Sed non tellus posuere, porttitor metus nec, faucibus nulla. Duis ut nunc viverra, tristique erat ut, ultricies leo. Pellentesque non tristique metus. Integer faucibus ornare diam at ornare.
      Etiam ut nisl quis velit bibendum mattis quis at nulla.</p>
  </article>

  <article>
    <img src="img/img3.png">
    <h2>Title 3</h2>
    <p>Nulla facilisi. Suspendisse pretium venenatis mauris, sed molestie tortor tempor vitae. Morbi semper mi id semper finibus.</p>
  </article>

  <article>
    <img src="img/img4.png">
    <h2>Title 4</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. Fusce ut tempor nulla, eget cursus libero. Maecenas lobortis accumsan ipsum, eu porta enim elementum nec.</p>
  </article>

  <article>
    <img src="img/img5.png">
    <h2>Title 5</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. Fusce ut tempor nulla, eget cursus libero. Maecenas lobortis accumsan ipsum, eu porta enim elementum nec.</p>
  </article>

  <article>
    <img src="img/img6.png">
    <h2>Title6</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. Fusce ut tempor nulla, eget cursus libero. Maecenas lobortis accumsan ipsum, eu porta enim elementum nec.</p>
  </article>
</div>

＆＃13;

＆＃13;

＆＃13;

你能帮我吗？

Answer 1

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

.lesarticles {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

article {
  border: 1px solid #52535C;
  margin: 20px;
  text-align: center;
  border-radius: 1%;
  list-style: none;
  width: 130px;
  display: inline-grid;
  overflow: hidden;
}

article p {
  text-align: left;
  width: 80%;
  margin: auto;
}

article img {
  max-width: 100%;
  height: auto;
}

.article-row {display: block;}

<div class="lesarticles">
<div class="article-row">
  <article>
    <img src="img/img.png">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </article>

  <article>
    <img src="img/img2.png">
    <h2>Title 2</h2>
    <p>Ut rutrum nulla ex, id vulputate libero dignissim eget. Sed non tellus posuere, porttitor metus nec, faucibus nulla. Duis ut nunc viverra, tristique erat ut, ultricies leo. Pellentesque non tristique metus. Integer faucibus ornare diam at ornare.
      Etiam ut nisl quis velit bibendum mattis quis at nulla.</p>
  </article>

  <article>
    <img src="img/img3.png">
    <h2>Title 3</h2>
    <p>Nulla facilisi. Suspendisse pretium venenatis mauris, sed molestie tortor tempor vitae. Morbi semper mi id semper finibus.</p>
  </article>
</div>
  
<div class="article-row">
  <article>
    <img src="img/img4.png">
    <h2>Title 4</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. Fusce ut tempor nulla, eget cursus libero. Maecenas lobortis accumsan ipsum, eu porta enim elementum nec.</p>
  </article>

  <article>
    <img src="img/img5.png">
    <h2>Title 5</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. Fusce ut tempor nulla, eget cursus libero. Maecenas lobortis accumsan ipsum, eu porta enim elementum nec.</p>
  </article>

  <article>
    <img src="img/img6.png">
    <h2>Title6</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. Fusce ut tempor nulla, eget cursus libero. Maecenas lobortis accumsan ipsum, eu porta enim elementum nec.</p>
  </article>
  </div>
</div>

Answer 2

您需要在clear:left伪类的帮助下使用nth-child清除行的每个第一个元素的浮点数，如

article:nth-child(3n+1) {
  clear: left;
}

它将针对1 ^st ，4 ^th ，7 ^th ... article来应用{{1} }

Stack Snippet

clear:left

.lesarticles {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

article {
  border: 1px solid #52535C;
  margin: 20px;
  text-align: center;
  border-radius: 1%;
  list-style: none;
  width: 130px;
  float: left;
  overflow: hidden;
}

article p {
  text-align: left;
  width: 80%;
  margin: auto;
}

article img {
  max-width: 100%;
  height: auto;
}

article:nth-child(3n+1) {
  clear: left;
}

Answer 3

您可以在前四个文章之后的每第三篇文章中添加clear:left。您可以使用:nth-child(3n+1)

执行此操作

＆＃13;

＆＃13;

.lesarticles {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

article {
  border: 1px solid #52535C;
  margin: 20px;
  text-align: center;
  border-radius: 1%;
  list-style: none;
  width: 130px;
  float: left;
  overflow: hidden;
}

article p {
  text-align: left;
  width: 80%;
  margin: auto;
}

article img {
  max-width: 100%;
  height: auto;
}
article:nth-child(3n+1){
clear:left;
}

＆＃13;

<div class="lesarticles">
  <article>
    <img src="img/img.png">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </article>

  <article>
    <img src="img/img2.png">
    <h2>Title 2</h2>
    <p>Ut rutrum nulla ex, id vulputate libero dignissim eget. Sed non tellus posuere, porttitor metus nec, faucibus nulla. Duis ut nunc viverra, tristique erat ut, ultricies leo. Pellentesque non tristique metus. Integer faucibus ornare diam at ornare.
      Etiam ut nisl quis velit bibendum mattis quis at nulla.</p>
  </article>

  <article>
    <img src="img/img3.png">
    <h2>Title 3</h2>
    <p>Nulla facilisi. Suspendisse pretium venenatis mauris, sed molestie tortor tempor vitae. Morbi semper mi id semper finibus.</p>
  </article>

  <article>
    <img src="img/img4.png">
    <h2>Title 4</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. Fusce ut tempor nulla, eget cursus libero. Maecenas lobortis accumsan ipsum, eu porta enim elementum nec.</p>
  </article>

  <article>
    <img src="img/img5.png">
    <h2>Title 5</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. Fusce ut tempor nulla, eget cursus libero. Maecenas lobortis accumsan ipsum, eu porta enim elementum nec.</p>
  </article>

  <article>
    <img src="img/img6.png">
    <h2>Title6</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. </p>
  </article>
    <article>
    <img src="img/img2.png">
    <h2>Title 7</h2>
    <p>Ut rutrum nulla ex, id vulputate libero dignissim eget. Sed non tellus posuere, porttitor metus nec, faucibus nulla. Duis ut nunc viverra, tristique erat ut, ultricies leo. Pellentesque non tristique metus. Integer faucibus ornare diam at ornare.
      Etiam ut nisl quis velit bibendum mattis quis at nulla.</p>
  </article>

  <article>
    <img src="img/img3.png">
    <h2>Title 8</h2>
    <p>Nulla facilisi. Suspendisse pretium venenatis mauris, sed molestie tortor tempor vitae. Morbi semper mi id semper finibus.</p>
  </article>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

以下是修改后的版本，您只需设置正确的高度：

可能的解决方案：

`https://jsfiddle.net/0eyxswcj/13/`