html - 如何仅使用 CSS 定位我的元素？

Question

我必须创建类似 that 的东西

这是我的 HTML:

<article class="article">
  <header class="article__header">
    <h2 class="article__title">Lorem ipsum dolor sit amet</h2>
    <time datetime="2037-10-02" class="article__date">Luty 10, 2037</time>
  </header>

  <img src="./img/articles/article-1.png" alt="" class="article__image">
  <p class="article__content">Ut malesuada mauris non eros bibendum scelerisque. Quisque id lorem eget ex dignissim venenatis. Phasellus dictum velit nec purus aliquet, sit amet convallis velit vehicula.  Aliquam erat volutpat. Donec mollis nibh turpis.</p>

  <a href="#" class="article__read-more">Czytaj dalej</a>
</article>

我真的被迫使用那个结构，所以我只能使用 CSS 来定位元素。问题是，我不知道如何在不更改 HTML 结构的情况下定位图像。

如果我可以更改 HTML，我会使用 flexbox :(你能帮助我吗？我真的不知道该怎么做。

Answer 1

I'm really forced to use that structure, so I can use only CSS to position elements.

绝对最简单的解决方案是这样的，在图像上使用 position: absolute 并在 article

.article {
  position: relative;
  padding-left: 220px;
}
.article__image {
  position: absolute;
  left: 0;
  top:0;
}

<article class="article">
  <header class="article__header">
    <h2 class="article__title">Lorem ipsum dolor sit amet</h2>
    <time datetime="2037-10-02" class="article__date">Luty 10, 2037</time>
  </header>

  <img src="http://placehold.it/200/f00" alt="" class="article__image">
  <p class="article__content">Ut malesuada mauris non eros bibendum scelerisque. Quisque id lorem eget ex dignissim venenatis. Phasellus dictum velit nec purus aliquet, sit amet convallis velit vehicula. Aliquam erat volutpat. Donec mollis nibh turpis.</p>

  <a href="#" class="article__read-more">Czytaj dalej</a>
</article>