Najnowsze tutoriale tworzenie stron internetowych
 

CSS Układ - inline-block


inline-block Wartość

Możliwe było przez długi czas, aby stworzyć siatkę pól, które wypełnia szerokość przeglądarki i otacza ładnie (gdy przeglądarka jest zmieniany), za pomocą float nieruchomości.

Jednakże, inline-block wartość display obiektu sprawia, że jest jeszcze łatwiejsze.

inline-block elementy podobne elementy wbudowane, lecz mogą mieć szerokości i wysokości.

Przykłady

Stary sposób - przy użyciu float (zauważ, że musimy także określić clear właściwości dla elementu po pływających oknach):

Przykład

.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.after-box {
    clear: left;
}
Spróbuj sam "

Ten sam efekt można osiągnąć za pomocą inline-block wartość display obiektu (zauważ, że nie clear nieruchomość jest potrzebny):

Przykład

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}
Spróbuj sam "