zdjęcie, tekst akapitu i float: left: w CSS

pytanie zadane 1 sierpnia 2022 w HTML i CSS przez Maverick700 Nowicjusz (160 p.)

Cześć, jestem nowy na forum, Robię stronę internetową i mam problem. Dałem do znacznika img stył float: left; Rozumiem, że dzięki temu zdjęcie powinno się ustawić na lewo od akapitu, a się nie ustawia. Gdy wejde w devtools i najadę na akapit to akapit obejmuje także zdjęcie. Dodatkowo zawartość akapitu wychodzi poza margines.

kod CSS

body{
	background: url("tło.jfif");
	background-size: 100%;
	background-attachment: fixed;
}

div.container{
	width: 1040px;
	margin: auto;
	padding: 0 15px;
}

div.main-content{
	width: 70%;
	float: left;
}
div.sidebar{
	width: 30%;
	float: left;
}
div.content{
	overflow: auto;
}
 article, footer, aside header, section{
	display: block;
}
article{
	margin-right: 15px;
	margin-bottom: 15px;
	
	
}
header{
	margin-bottom: 15px;
}
footer{
	margin-top: 15px;
}

img{
	float:left;
}

html

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8"/>;
	<meta name="destription"  content"Nasza firma zajmuje się produkcją i dystrubucją własnych wyrobów o najwyższej jakości"/>
	<link rel="stylesheet" href="Style.CSS">
	<title>Quick Sparrow</title>
</head>
<body>
	<div class="container">
		<header>
			<h1>
				Firma Quick Sparrow od lat dba o wyroby najwyższej jakości. Do zaoferowania mamy...
			</h1>
		</header>
		<div class= "content">
		<div class= "main-content">
		<section>
			<article>
				<h2>nagłówek 1</h2>
		
				<img src="powerbank.png">
					
			
				<p>
					bleblenbelenjefnjanejnfajwnrnrunwuryrwbkbwykgrfyiwgrfywuihrwilwbleblenbelenjefnjanejnfajejnfajwnrnrun
					uryrwbkbwykgrfyiwgrfywuihrwilwbleblenbelenjefnjanejnfajwnrnrunwuryrwbkbwykgrfyiwgrfywuihrwilwbleblenbelenje
					fnjanejnfajwnrnrunwuryrwbkbwykgrfyiwgrfywuihrwilwbleblenbelenjefnjanejnfajwnrnru
					nwuryrwbkbwykgrfyiwgrfywuihrwilwbleblenbelenjefnjanejnfa
					wnrnrunwuryrwbkbwykgrfyiwgrfywuihrwilwbleblenbelenjefnjanejnfajwnrnrunwuryrwbkbwykgrfyiwgrfywuihrwilw
				</p>
			
			</article>
			<article>
				<h2>nagłówek 2</h2>
			
					<img src="rzeźba.png">
					
					<p>
						jkafnfjsfakngggggfsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
						ssaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
						aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
						aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
					</p>
		
			
			</article>
		</section>
		</div>
		<div class="sidebar">
		<aside>
			<h2>Kilka słów o nas</h2>
			<p>Ogólnie jesteśmy super. Firme prowadzimy od 53 lat. Jeśteśmy zawsze dokładni w tym co robimy. Przede wszystkim dbamy o jakość.</p>
		</aside>
		</div>
		</div>
		<footer>Wszelkie prawa zastrzeżone &copy</footer>
	</div>
</body>
</html>

Przy okazji pisze w Notepad++. Możę w tym leży problem.

Dziękuję za każdą udzieloną pomoc

Maverick

1 odpowiedź

odpowiedź 1 sierpnia 2022 przez SzkolnyAdmin Szeryf (86,360 p.)
wybrane 6 sierpnia 2022 przez Maverick700

Najlepsza

Edytor nie ma tu nic do rzeczy. Po kolei:

1. Linia 4 pliku HTML: usuń średnik na końcu linii.

2. Linia 5 pliku HTML - zmień na (masz błędy, które widać w edytorze)

<meta name="description"  content="Nasza firma zajmuje się produkcją i dystrubucją własnych wyrobów o najwyższej jakości">

3. Gdy w akapitach dasz trochę spacji pomiędzy ciągiem znaków, wszystko ułoży się prawidłowo. Przeglądarka nie miała gdzie złamać linii.

I najważniejsze: do struktury strony użyj Flexboxa lub Grida. Flota: left tylko do ustawienia obrazków względem tekstu.

komentarz 1 sierpnia 2022 przez VBService Ekspert (253,400 p.)
edycja 2 sierpnia 2022 przez VBService

3. Gdy w akapitach dasz trochę spacji pomiędzy ciągiem znaków, wszystko ułoży się prawidłowo. Przeglądarka nie miała gdzie złamać linii.

Jako tekst przykładowy zalecam użycie lorem ipsum, sprawdź.

komentarz 6 sierpnia 2022 przez Maverick700 Nowicjusz (160 p.)

Dzięki naprawę, wszystko pomogło, założę lepsze okulary, by nie robić błędów.

Podobne pytania

zdjęcie, tekst akapitu i float: left: w CSS

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci