Wątek przeniesiony 2014-08-01 12:05 z Webmastering przez dzek69.

Display block vs inline - błędne centrowanie lub rozmiar

0

Witam,

Mam głównego DIV-a na stronie, którego szerokość jest dynamiczna (to pierwsze z utrudnień). Chcę wyświetlać w nim bloki o stałych rozmiarach (500x500). W jednym wierszu będzie tyle boksów ile starczy miejsca, te które się nie zmieszczą wędrują niżej itd.

Rozsądne wydaje się zastosowanie bloków więc kodzę:

.container {
    margin: 0 auto;   	
    display: block;	
    float: left;
    padding: 5px;	
}

.box {
    color: #fff;
    padding: 10px;
    margin: 10px;
    width: 500px;
    height: 500px;
    font-size: 16px;
    float: left;
}

Wyświetlają się boxy o zadanych rozmiarach jednak są wyrównane do lewej. Szukam rozwiązania w internecie - głównie oparte są o stałą szerokość co u mnie odpada lub zmiana na inline-block. No dobra, robię zmianę na inline-block. Boxy się centrują jednak rozwalają mi się ich rozmiary a raczej pozycjonowanie - zależnie od ilości treści jeden jest wyżej, drugi jest niżej itd.

Jak pogodzić obie metody aby bloki miały stałe rozmiary i były wycentrowane?

1

http://jsbin.com/lomilifo/1/

(zmniejsz szerokosc okna przegladarki zeby obejrzec efekt)

0

Kozak, dzięki!

1 użytkowników online, w tym zalogowanych: 0, gości: 1