Question

我希望图像在左侧，但内容（在meta上方的标题，在文本上方的meta）在右侧（博客列表样式）。

我无法更改HTML结构，那么我在这里可以使用CSS网格做什么？

<article>

<img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">

<h2 >Golden Meadow</h2>

<p>by <span>Jack</span> in <span>News</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc aliquam justo et nibh venenatis aliquet. 
Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>

</article>

https://jsfiddle.net/ch9n26sz/

Answer 1

您需要定义一个网格。并告诉元素站在哪一列：

示例

article {
  display: grid;
  grid-template-columns: auto 1fr;
}

:not(img) {
  grid-column: 2;
  /* other style */
  padding:0.25rem;
  /* ... */
}

<article>
  <img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">
  <h2>Golden Meadow</h2>
  <p>by <span>Jack</span> in <span>News</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
</article>

关于提醒或教程https://css-tricks.com/snippets/css/complete-guide-grid/

图像也可以跨越几行并在

内对齐

article {
  display: grid;
  grid-template-columns: auto 1fr;
}

img {
  grid-row: span 5;/* amount of rows to span */
  margin: auto 0.5em;/* align-self can also be used read the tutorials */
}

<article>
  <img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">
  <h2>Golden Meadow</h2>
  <p>by <span>Jack</span> in <span>News</span></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
</article>

尝试使结构与CSS网格配合使用

1 个答案: