Cztery responsywne divy w linii zawierające obrazek i tekst

Question

Witam, mam do państwa pytanie. Otóż chcę stworzyć strukturę, która będzie w jednej linii zawierała 4 divy, wewnątrz których będą znajdowały się kolejne dwa divy jeden z obrazkiem, a drugi z podpisem. Chciałbym oczywiście, aby działał w tym przypadku responsywność. Czy mógłbym prosić i pomoc? 

Oto struktura kodu, jeżeli coś jest nie tak, to proszę o pomoc i z góry dziękuję za wszelkie odpowiedzi. 

<div id="container">
<div id="all">
<div class="part">
<div class="img"></div>
<div class="desc"</div>
</div>
<div class="part">
<div class="img"></div>
<div class="desc"</div>
</div>
<div class="part">
<div class="img"></div>
<div class="desc"</div>
</div>
<div class="part">
<div class="img"></div>
<div class="desc"</div>
</div>
</div>
</div>

 

Answer 1

Na pierwszy rzut oka widać, że masz pełno literówek w tagach div, a dokładniej brak znaków ">". Poprawny kod:

<div id="container">
<div id="all">
<div class="part">
<div class="img"></div>
<div class="desc"></div>
</div>
<div class="part">
<div class="img"></div>
<div class="desc"></div>
</div>
<div class="part">
<div class="img"></div>
<div class="desc"></div>
</div>
<div class="part">
<div class="img"></div>
<div class="desc"></div>
</div>
</div>
</div>

Pobierz sobie jakiś edytor podkreślający w fajny sposób składnię. Unikniesz w ten sposób wielu problemów i błędów z kodem spowodowanym najczęściej przez takie literówki. Polecam Sublime Text 3.

Answer 2

Możesz trochę uporządkować kod wcięciami? To jest w ogóle nieczytelne!

Answer 3

No to po prostu używasz jednostek %, vw, vh, vmin,vmax, em, etc. i masz responsywność. Ot cała filozofia.

Answer 4

Tak jak napisał COLD IC3 masz literówki. Wystarczy że skopiujesz kod który podał i będzie ok. Aby divy były w jednej linii polecam użyć do nich float:left; Jeśli chcesz żeby divy się skalowały, możesz zrobić jedną z rzeczy:

• Nadać .part width:25%; a jego rodzicowi (czyli #all) position:relative; i również szerokość w np. procentach. Sprawi to że .part zawsze będzie miał szerokość jednej czwartej #all (zmieszczą się 4 w rzędzie), zwróć uwagę na position:relative; Bez nadania rodzicowi pozycji innej niż domyślna, szerokość zależałaby nie od rodzica, a od szerokości całego ekranu.

  .part{
  float:left;
  width:25%;
  }
  #all{
  position:relative;
  width:80%;
  }
  

   

• Inne podejście to nadanie .part szerokości za pomocą jednostki vw (1vw to 1% szerokości ekranu), jednak z tym bym uważał gdyż vw jest jeszcze zabugowany i nie zawsze uwzględnia obecność paska scroll z prawej (w efekcie 100vw może być szersze niż strona)
• Ciekawe podejście to użyć do wszystkiego (divy, obrazki w środku) jednostki em (1em to wielkość tekstu, 2em to jej dwukrotność itd), a sam font-size ustawić jakąś jednostką która się skaluje np vw, vh. Wtedy wszystkie elementy będą skalowały się razem.

Jeśli chcesz dalej zgłębiać temat responsywnych stron, polecam poczytać w internecie o media queries. Są na dłuższą metę bardzo przydatne.

Pozdrawiam