float: left;

Question

Zawsze do ustawiania bloków obok siebie używałem "float: left;", jednak gdy byłem na praktykach, powiedzieli mi, że oni tego nie używają.

A więc moje pytanie, czego mogą używać, czym mogę zastąpić "float: left;"?

Comments

byłem na praktykach, powiedzieli mi, że oni tego nie używają

I nie zapytałeś, czego używają?

---

Zapytałem, ale nie pamiętam jaką odpowiedź dostałem, to było z 2 lata temu.

Answer 1

display: flex;

za jakiś czas display: grid;

Comments

Ewentualnie można jeszcze się bawić z display: inline-block. Ale to już raczej taka ciekawostka tylko.

---

Zapomniałeś, że starożytni używali kiedyś również tabel - może to mieli na myśli? :D

---

display: flex; właśnie o to chodziło, wielkie dzięki

---

Coś mi nie chce działać.

	<div id="top">

		<div id="logo"><img src="images/logo1.png"/></div>
		
		<div class="option">O NAS</div>
		<div class="option">ZESPÓŁ</div>
		<div class="option">OFERTA</div>
		<div class="option">BIZNES PARTNERZY</div>
		<div style="clear: both;"></div>
	
	</div>

.option
{
	display: flex;
	padding: 20px;
	height: 40px;
	font-size: 15px;
	cursor: pointer;
}

 

---

<div class="top">
   <div class="logo"><img src="images/logo1.png"></div>
   <div class="option">O NAS</div>
   <div class="option">ZESPÓŁ</div>
   <div class="option">OFERTA</div>
   <div class="option">BIZNES PARTNERZY</div>
</div>

.top {
   display: flex;
   flex: row wrap;
   justify-content: space-around;
}
.option {
   padding: 20px;
   height: 40px;
   font-size: 15px;
   cursor: pointer;
}

 

---

Mam kolejny problem

Mam coś takiego

<div id="box">
<div id="1"><img src="coś1"/></div>
<div id="2"><img src="coś2"/></div>
</div>

Jak bez użycia float ustawić to tak aby div o id = 1 był po lewej, o id = 2 po prawej, a na środku w divie box mógł być jakiś tekst?

divy 1 i 2 nie mają zajmować 100% wysokości diva box

---

Ale dlaczego bez użycia float? Nie rozumiem.

---

Bo z float wiem, jak to robić, i szukam jakiejś alternatywy, trochę źle zapytałem, czy jest jakieś alternatywne rozwiązanie?

---

https://bitsofco.de/alternatives-to-floating/

---

Poczytaj jeszcze o właściwościach tego flexa, możesz zrobić w ten sposób
https://jsfiddle.net/bdpf3yqc/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/