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结构的情况下定位图像。

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

Answer 1

我真的被迫使用那个结构，所以我只能使用CSS 位置元素。

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

上使用左边的填充等于图像大小（+一些空格，此处为20px）

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以通过两种方式完成此操作 1.只需使图像浮动：左

检查此代码段

＆＃13;

img{
  float:left
}

＆＃13;

<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="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" height=150px width=100px 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>

＆＃13;

使用弹性框。稍微改变标记，用div包装图像和内容并使显示变为柔和

检查这个

＆＃13;

article{
  
}

.content{
  display:flex;
}

＆＃13;

<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>
<section class="content">
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" height=150px width=100px 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>
  </section>
</article>

＆＃13;

希望这有帮助

Answer 3

一种选择是absolute将img置于其relative定位的父级内。

在这种情况下，您可以absolute将img置于父元素article内（应 relative定位;否则，img元素相对于body绝对定位。对于所有其他子元素，可以应用margin-left，其值大于图像的width。

示例代码段：

＆＃13;

.article {
  /* parent element is attributed relative position */
  position: relative;
}
.article__image {
  /* `img` element is positioned absolute, relative to its parent */
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
}
.article > *:not(.article__image) {
  /* All direct children of parent element `article` except `img` element is given a margin which is greater than the width of the image */
  margin-left: 210px;
}
/* Other element styles for reference */

.article__header {
  text-transform: uppercase;
}
.article__read-more {
  padding: 2px 10px;
  border-left: 1px solid red;
  color: red;
  text-decoration: none;
}

＆＃13;

<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="https://upload.wikimedia.org/wikipedia/commons/2/26/Amborella_trichopoda_%283065968016%29_fragment.jpg" 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>

<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="https://upload.wikimedia.org/wikipedia/commons/b/b2/Rose_flower01.JPG" 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>

＆＃13;

如何仅使用CSS定位元素？

3 个答案: