如何僅使用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結構的情況下定位圖像。

我會用Flexbox的，如果我可以改變HTML :( 你能幫助我嗎？我真的不知道，如何做到這一點。

Answer 1

您可以通過兩種方式 1.只要使圖像做浮動：左

檢查這個片段

img{ 
 
    float:left 
 
}

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

使用Flex box.Change標記了一下，包裹圖像和內容DIV，使顯示器撓性它

檢查這個

article{ 
 
    
 
} 
 

 
.content{ 
 
    display:flex; 
 
}

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

希望這幫助

Answer 2

我真的被迫使用該結構，所以我只能使用CSS到 位置元素。

絕對最簡單的解決方案將是這樣的，在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>

的圖像和左填充等於圖像尺寸（+一些空間，這裏20像素）上使用 position: absolute

Answer 3

一個選項是absolute將img定位在其位於其父母的位置。

在這種情況下，可以absolute位置img父元素的內部，article（其應該是relative定位;相對於所述body否則，img元件將絕對定位）。對於所有其他子元素，margin-left的值可以大於圖像的width。

示例代碼段：

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

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