CSS - img float - kontener obrazka nie rozciąga się - dlaczego?

0

Witam, mam w css'ie jakiś kontener z: display:block; width:100%; height:auto; oraz obrazek (img) o dokładnie zadanych wymiarach, display:block; float:right; + marginesy i problem jest taki, że kontener nie dopasowuje wysokości do rozmiarów obrazka, tzn nie rozciąga się w dół, aby stanowić podłoże pod zawartość, jak usunę float, to jest ok, z tym, że obrazek nie przylega do prawej strony, tak samo jest z float:left;
Mógłby ktoś dać jakieś rozwiązanie? chcę, żeby można było wyświetlać obrazki w jednej linii, z tym, że z dyrektywą czy mają przylegać do lewej, prawej strony lub wysirodkowane.
Dziękuje za pomoc.

1

Witam. W stylach CSS dla 'container' zmień wartość display. Jest to rozwiązanie nr 1.

.container {
  display: inline-block;
}

Przykład: https://jsfiddle.net/2krjkj3w/2/

Rozwiązanie nr 2.
Z racji tego, że używasz elementów "pływających" czyli float, musisz dodać pustego diva i dodać do niego pewną wartość, która naprawi problemy:

<div class="container">
  <img src="https://placehold.it/300x250" alt="one">
  <div class="fix"></div>
</div>

.fix {
  clear: both;
}

Przykład https://jsfiddle.net/2krjkj3w/3/
Więcej informacji ---> http://www.w3schools.com/css/css_float.asp

0

Dzięki, pomysł z clearfixem podziałał.

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