CSS Text oblewajacy zdjecie

pytanie zadane 19 października 2016 w HTML i CSS przez Alex.Ironside Stary wyjadacz (14,900 p.)

<header id="top">
	<h1>Gunpowder</h1>
	<img src="Gunpowder_black.jpg" alt="gunpowder"/>
	<p>text.<em><dfn>Gunpowder</dfn></em>text<img src="pirates.jpg" alt="pirates"/></p>
</header>
<main>
	<p>text</p><img src="Chinese_rocket.png" alt="Chinese rocket"/>
        <p>text</p><img src="080407-revolutionary-war-02.jpg" alt="infantry"/>
	<p>Today, gunpowder is also used in fireworks.</p><img src="Fireworks.jpg" alt="Picture of fireworks"/>
</main>

Sprawa jest taka. Chce zrobic tak zeby tekst oblewal obrazki z prawej, i te byly pod soba. Problem w tym, ze jesli dam do img float left to obrazki staja kolo siebie. Jesli dodam styl do tylko jednego, to i tak bedzie sie przyklejal do poprzedniego obrazka. Probowalem z <br/> i nic nie dalo. Jestem nieco zagubiony.

2 odpowiedzi

odpowiedź 19 października 2016 przez Przemek Zembrzuski Gaduła (3,240 p.)

proponuje pobawić się z display flex

komentarz 19 października 2016 przez Alex.Ironside Stary wyjadacz (14,900 p.)

A o tym w zyciu nie slyszalem. Kukne. A jakis starozytny dobry sposob na szybko bedzie?

1	komentarz 19 października 2016 przez Przemek Zembrzuski Gaduła (3,240 p.) float left na img i p i pamiętaj o dodaniu clear both pod nimi bo w przeciwnym razie reszta strony się rozjedzie

komentarz 19 października 2016 przez Alex.Ironside Stary wyjadacz (14,900 p.)

No tak. Wiedzialem ze o czyms zapomnialem i jakos sie to robilo. Dzieki!

odpowiedź 19 października 2016 przez pablop76 VIP (123,340 p.)

img zamknij w <div></div> o klasie np: float, pod divem daj tekst w znaczniku <p></p> Dla <div class="float"></div>

daj float: left; i jakiś margin np: margin: 0 20px 0 0 ; żeby odsunąć tekst od obrazka. I teraz , jeżeli tekstu jest mniej niż wysokość obrazka to daj dla<p></p> height tyle ile wysokość obrazka jeżeli jest go dużo to nie potrzeba.

przykładowy zapis

<!DOCTYPE html>
<html lang="pl">
<head>
<meta chart="utf-8">
<style>
.float{
float: left;
margin: 0 20px 0 0;
}
p{
height: 300px;}
</style>
</head>
<body>
<header id="top">
<h1>Gunpowder</h1>
<div class="float">
    <img src="....jpg" alt="gunpowder"/>
</div>
    <p> text. </p>
<div class="float">
	<img src="....jpg" alt="pirates"/>
</div>
<p><em><dfn>Gunpowder</dfn></em>text</p>
</header>
<main>
<div class="float">
	 <img src="....jpg" alt="Chinese rocket"/>
</div>
<p>text</p>
<div class="float">
	<img src="....jpg" alt="infantry"/>
</div>
<p>text</p>
<div class="float">
	<img src="....jpg" alt="Picture of fireworks"/>
</div>
  <p>Today, gunpowder is also used in fireworks.</p>
</main>

</body>
</html>