HTML每2篇文章开始新行

huangapple
go评论138阅读模式
英文:

HTML Start new row every 2 articles

问题

你好，以下是翻译好的部分：

我有这个HTML / CSS代码用于一些卡片，问题是，我需要它们在每两个'article' 区域之后开始新的一行。如何实现这一点？

这导致了一个'articles'或卡片的单行。如何在每两个卡片之后开始新的一行？（文章数量将在短期内增加）

谢谢。

英文:

I have this HTML / CSS code for some cards, thing is, I need them to start a new row every two 'article' regions.
How can achieve this?

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

  1. .tiles_bodyLOB {
  2.   display: flex;
  3.   grid-template-columns: auto auto;
  4.   column-gap: 1rem;
  5.   row-gap: 1rem;
  6.   margin-top: 0.25rem;
  7.   @media (max-width: 700px) {
  8.     grid-template-columns: repeat(1, 1fr);
  9.   }
  10.   padding: 1rem;
  11.   border-radius: 8px;
  12.   justify-content: space-between;
  13. }
  15. .tilesLOB {
  16.   display: grid;
  17.   grid-template-columns: auto auto;
  18.   gap: 1rem;
  19.   @media (max-width: 700px) {
  20.     grid-template-columns: repeat(1, 1fr);
  21.   }
  22. }
  24. .tile-styleLOB {
  25.   background-color: red;
  26.   min-height: 200px;
  27.   transition: 0.25s ease;
  28.   &amp;:hover {
  29.     transform: translateY(-5px);
  30.   }
  31.   &amp;:focus-within {
  32.     box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-olive-500);
  33.   }
  34.   min-width: 600px;
  35. }
  37. .a-tag:link {
  38.   color: white;
  39. }
  41. .a-tag:hover {
  42.   color: white;
  43. }
  45. .a-tag:visited {
  46.   color: white;
  47. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;tile-container&quot;&gt;
  2.   &lt;div class=&quot;tiles_bodyLOB&quot;&gt;
  3.     &lt;article class=&quot;tile-styleLOB&quot;&gt;
  4.       &lt;h1 style=&quot;color: white; font-size: 38px;&quot;&gt;
  5.         &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Some Text ABC&lt;/span&gt;
  6.       &lt;/h1&gt;
  7.       &lt;span style=&quot;color: white; font-size: 24px&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  8.                     Sub Text 1
  9.                  &lt;/span&gt;
  10.       &lt;a href=&quot;#&quot;&gt;
  11.         &lt;div style=&quot;color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr&quot;&gt;
  12.           &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Case A: 1 
  13.                        00&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  14.         &lt;/div&gt;
  15.       &lt;/a&gt;
  16.     &lt;/article&gt;
  18.     &lt;article class=&quot;tile-styleLOB&quot;&gt;
  19.       &lt;h1 style=&quot;color: white; font-size: 38px;&quot;&gt;
  20.         &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Some Text ABC&lt;/span&gt;
  21.       &lt;/h1&gt;
  22.       &lt;span style=&quot;color: white; font-size: 24px&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  23.                     Sub Text 1
  24.                  &lt;/span&gt;
  25.       &lt;a href=&quot;#&quot;&gt;
  26.         &lt;div style=&quot;color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr&quot;&gt;
  27.           &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Case A: 1 
  28.                        00&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  29.         &lt;/div&gt;
  30.       &lt;/a&gt;
  31.     &lt;/article&gt;
  34.     &lt;article class=&quot;tile-styleLOB&quot;&gt;
  35.       &lt;h1 style=&quot;color: white; font-size: 38px;&quot;&gt;
  36.         &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Some Text ABC&lt;/span&gt;
  37.       &lt;/h1&gt;
  38.       &lt;span style=&quot;color: white; font-size: 24px&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  39.                     Sub Text 1
  40.                  &lt;/span&gt;
  41.       &lt;a href=&quot;#&quot;&gt;
  42.         &lt;div style=&quot;color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr&quot;&gt;
  43.           &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Case A: 1 
  44.                        00&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  45.         &lt;/div&gt;
  46.       &lt;/a&gt;
  47.     &lt;/article&gt;

<!-- end snippet -->

This results into a single row of 'articles' or cards.
How can I start a new row every two cards? (the number of articles will increase in the short term)

Thanks

答案1

得分: 1

如果您想根据屏幕宽度包裹文章，则在CSS中向.tiles_bodyLOB添加flex-wrap: wrap;，如下所示：

  1. .tiles_bodyLOB {
  2.     display: flex;
  3.     grid-template-columns: auto auto;
  4.     column-gap: 1rem;
  5.     row-gap: 1rem;
  6.     margin-top: 0.25rem;
  7.     @media (max-width: 700px) {
  8.         grid-template-columns: repeat(1, 1fr);
  9.     }
  10.     padding: 1rem;
  11.     border-radius: 8px;
  12.     justify-content: space-between;
  13.     flex-wrap: wrap;
  14.  }

在片段中的其他内容保持不变。点击片段中的“full page”以查看大屏幕上的包裹效果。

英文:

If you want to wrap the articles based on screen width then add flex-wrap: wrap; to .tiles_bodyLOB in the CSS, like this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .tiles_bodyLOB {
  2.     display: flex;
  3.     grid-template-columns: auto auto;
  4.     column-gap: 1rem;
  5.     row-gap: 1rem;
  6.     margin-top: 0.25rem;
  7.     @media (max-width: 700px) {
  8.         grid-template-columns: repeat(1, 1fr);
  9.     }
  10.     padding: 1rem;
  11.     border-radius: 8px;
  12.     justify-content: space-between;
  13. 	flex-wrap: wrap;
  14.  }
  16. .tilesLOB {
  17.     display: grid;
  18.     grid-template-columns: auto auto;
  19.     gap: 1rem;
  20.     @media (max-width: 700px) {
  21.         grid-template-columns: repeat(1, 1fr);
  22.         }
  23. }
  25. .tile-styleLOB {
  26.  background-color: red;
  27.   min-height: 200px;
  28.   transition: 0.25s ease;
  29.   &amp;:hover {
  30.     transform: translateY(-5px);
  31.     }
  32.   &amp;:focus-within {
  33.     box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-olive-500);
  34.     }
  35.   min-width: 600px;
  36. }
  38. .a-tag:link {color: white;}
  39. .a-tag:hover {color: white;}
  40. .a-tag:visited {color: white;}

<!-- language: lang-html -->

  1. &lt;div id=&quot;tile-container&quot;&gt;    
  2.    &lt;div class=&quot;tiles_bodyLOB&quot;&gt;
  3.         &lt;article class=&quot;tile-styleLOB&quot;&gt;
  4.            &lt;h1 style=&quot;color: white; font-size: 38px;&quot;&gt;
  5.              &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Some Text ABC&lt;/span&gt;
  6.            &lt;/h1&gt;
  7.              &lt;span style=&quot;color: white; font-size: 24px&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  8.                 Sub Text 1
  9.              &lt;/span&gt;
  10.            &lt;a href=&quot;#&quot;&gt;  
  11.                &lt;div style=&quot;color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr&quot;&gt;
  12.                    &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Case A: 1 
  13.                    00&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  14.                &lt;/div&gt;
  15.            &lt;/a&gt;
  16.         &lt;/article&gt;
  18.         &lt;article class=&quot;tile-styleLOB&quot;&gt;
  19.            &lt;h1 style=&quot;color: white; font-size: 38px;&quot;&gt;
  20.              &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Some Text ABC&lt;/span&gt;
  21.            &lt;/h1&gt;
  22.              &lt;span style=&quot;color: white; font-size: 24px&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  23.                 Sub Text 1
  24.              &lt;/span&gt;
  25.            &lt;a href=&quot;#&quot;&gt;  
  26.                &lt;div style=&quot;color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr&quot;&gt;
  27.                    &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Case A: 1 
  28.                    00&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  29.                &lt;/div&gt;
  30.            &lt;/a&gt;
  31.         &lt;/article&gt;
  33.         &lt;article class=&quot;tile-styleLOB&quot;&gt;
  34.            &lt;h1 style=&quot;color: white; font-size: 38px;&quot;&gt;
  35.              &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Some Text ABC&lt;/span&gt;
  36.            &lt;/h1&gt;
  37.              &lt;span style=&quot;color: white; font-size: 24px&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  38.                 Sub Text 1
  39.              &lt;/span&gt;
  40.            &lt;a href=&quot;#&quot;&gt;  
  41.                &lt;div style=&quot;color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr&quot;&gt;
  42.                    &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Case A: 1 
  43.                    00&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  44.                &lt;/div&gt;
  45.            &lt;/a&gt;
  46.         &lt;/article&gt;
  47. 	&lt;/div&gt;
  48. &lt;/div&gt;

<!-- end snippet -->

Click full page in the snippet to see the warping on large screens.

huangapple
  • 本文由 发表于 2023年6月6日 05:03:19
  • 转载请务必保留本文链接：https://go.coder-hub.com/76409994.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定