css多列和行文章

问题描述 投票：-1回答：4

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

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

你能帮我吗 ？

html css responsive-design
4个回答
0
投票

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

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

它将针对第1，第4，第7 ...... article应用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;
}
<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>
0
投票

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

.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>
0
投票

您可以在最初的四个文章后面的每三篇文章中添加clear:left。你可以使用:nth-child(3n+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;
  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;
}
<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>
-1
投票

这是一个修改版本，您只需设置正确的高度：

可能解决方案

`https://jsfiddle.net/0eyxswcj/13/`
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.