[CSS] Problem z wysokością divów Opcje

[czarymaryhokus]

Witajcie
Mam problem z wysokością divów. Używam Bootstrapa ale to chyba raczej bez znaczenia jeżeli chodzi o problem.
Na obrazku pokazałem co chcę osiągnąć:

(IMG:http://pics.tinypic.pl/i/00641/p6qufsp1v1ri.jpg)

Chcę żeby przy mniejszej rozdzielczości w jednej linii były 2 kolumny a przy większej np. 4.
Więc rozwiązaniem jest taki schemat:

Kod

<wiersz>
<kolumna></kolumna>
<kolumna></kolumna>
<kolumna></kolumna>
<kolumna></kolumna>
<kolumna></kolumna>
<kolumna></kolumna>
<kolumna></kolumna>
.....
</wiersz>

Problem z nim jest taki że jeżeli tekst przy jednym obrazku zajmuje kilka linijek a przy innych mniej to w kolejnej linijce wszystko się przesuwa.
Oczywiście wysokości bloku nie mogę ustalić gdyż nie są one stałe.

Rozwiązaniem złym w tym przypadku jest poniższy schemat gdyż nie osiągnę zamierzonej responsywności:

Kod

<wiersz>
<kolumna></kolumna>
<kolumna></kolumna>
<kolumna></kolumna>
</wiersz>
<wiersz>
<kolumna></kolumna>
<kolumna></kolumna>
<kolumna></kolumna>
</wiersz>
.....

mam nadzieję że ktoś będzie umiał mi pomóc (IMG:style_emoticons/default/smile.gif)

Ten post edytował czarymaryhokus 9.03.2015, 10:50:57

[tzm]

Css3 -> column-count I @media

[czarymaryhokus]

Dzięki za odpowiedź i próbę pomocy ale niestety działa od IE10 i nowsze inne wersje przeglądarek więc odpada.
Stronę będą odwiedzać też tzw. biurowe osoby i sam wiem że w instytucjach z aktualizacjami i nowymi Windowsami jest krucho...

Może ktoś ma inny pomysł?

[tzm]

Wtffff, width I float w takim razie dzialaja wszedzie. Opakuj to sobie w kontener do centrowania I musi dzialac. Siedze na tel wiec Ci nie pokaze ale to podstwa html I CSS o co pytasz

Edit: Wakacje Ida I dzieci mysla ze aplikacje dla instutucji beda robic bez znajomosci niczego. Mysl trzezwo, nie tedy droga w tym zawodzie

Ten post edytował tzm 9.03.2015, 22:25:53

[czarymaryhokus]

wtf? Czy ja kogoś obrażam pytając? chyba po to jest forum?
Mam 36 lat więc nie wiem kto byłby dzieckiem? ... dorobić? oj nie muszę raczej i nie zamierzam (IMG:style_emoticons/default/smile.gif) . Koderem nie jestem a sieciowcem więc mogę nie mieć wystarczającej wiedzy i dlatego pytam... Robię projekt dla bliskiej mi osoby i tylko dlatego tym się zajmuje... instytucje? Napisałem "biurowe ludki" mogą na nią wchodzić a nie że instytucja za to płaci...
Nie umiesz pomóc nie pomagaj i nie troluj. Nawet jakbym miał naście lat (a nie mam) to ktoś pyta bo nie wie...

Css3 -> column-count I @media?
Standardowo tak jak napisałem w IE10 działa dopiero i jakbyś spojrzał na obrazek to byś widział że interesuje mnie aby następny wiersz był równy (zaczynał się od jednej linii) a nie poszczególne kolumny wchodziły pod te które są wyżej a standardowo tak to działa...


Float i centrowanie...? albo ja czegoś nie wiem (co jest całkiem możliwe albo Ty nie zrozumiałeś problemu no bo jakby nie patrzeć go nie rozwiązałeś tylko wyjechałeś z wakacjami...).
Jeśli zaś nie jesteś trolem a tylko miałeś słabszą chwilkę to będę wdzięczny za pomoc jeśli ktoś mi z nią przyjdzie i nawet napisze nie da się...

Patrzać np. na bootstrapa i kod który dałem poniżej (col-md-4 ma domyślnie float!) to ładnie zadziała ale teksty muszą być takiej samej wysokości.

Kod

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

Rozwiązanie jest poniżej ale wtedy tracimy możliwość pokazania obrazków i tekstów w jednym rzedzie po 2 lub po 4 jakbyśmy chcieli. a takich bloków będę miał nawet 50!

Kod

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

pozdrawiam

Ten post edytował czarymaryhokus 10.03.2015, 00:19:30

[trueblue]

Coś takiego?
http://jsfiddle.net/863uzsxw/
W przypadku gdy chcesz zrobić inny układ kolumn (np. 2 w rzędzie) dla mniejszej rozdzielczości, trzeba zmienić parametry dla nth-child.

[czarymaryhokus]

trueblue dzięki wielkie za pomoc (IMG:style_emoticons/default/smile.gif) Nigdy bym na to nie wpadł... Tak to jest jak zaczynałem robić pierwszą stronę w 1998 roku i zaczynało się od tabelek (IMG:style_emoticons/default/smile.gif) a doszło się max do CSS 2 (IMG:style_emoticons/default/smile.gif)
Pokombinuje z tym przykładem - jeszcze raz dzięki.

[Pyton_000]

Możesz też dać

Kod

<div class="clearfix visible-xs-block"></div>

co np. 2 ale to trochę bez sensu. Rozwiązanie Trueblue jest bardziej elastyczne ze względu na możliwość użycia @media

[czarymaryhokus]

dzięki Pyton_000 - tak też zrobiłem i użyłem media. W jednym miejscu działa a w innym jeszcze się bawię (IMG:style_emoticons/default/smile.gif)
Niezła zabawa i chyba zły zawód wybrałem bo mogłem być jak to kiedyś się nazywało webmasterem a nie jak teraz front developerem (IMG:style_emoticons/default/smile.gif) Cóż pozostało mi tylko zawodowo adminowanie... (IMG:style_emoticons/default/smile.gif)