Jak ustawić divy pod sobą?

pytanie zadane 6 lipca 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)

Witam forumowiczów!

Więc na normalnej rozdzielczości mam zdjęcia z wartością float : left aby układały się obok siebie, ale przy zmianie na mniejszą rozdzielczość chciałbym aby ustawiały się pod sobą. No i prosiłbym o pomoc z tym.

Dzięki za poświęcony czas!

3 odpowiedzi

odpowiedź 6 lipca 2018 przez pablop76 VIP (123,180 p.)

Jest taka technika którą wykorzystuje np. bootstrap 3 , która polega na zastosowaniu siatki W twoim przykładzie pasuje idealnie.

komentarz 6 lipca 2018 przez Layoutowiec Mądrala (5,470 p.)

Dzięki! Masz pełną racje i system siatek css nada się tutaj idealnie :)

odpowiedź 6 lipca 2018 przez niezalogowany

Poczytaj o media queries

komentarz 6 lipca 2018 przez Layoutowiec Mądrala (5,470 p.)

Ale mi chodzi o to co trzeba wpisać w media queries żeby divy ustawiły się pod sobą

komentarz 6 lipca 2018 przez niezalogowany

Float: none;

Width: 100%

I wszystkie divy ustawią się pod sobą ;)

Poczytaj o flexboxie bo wtedy tego typu zmiany są bardzo proste

komentarz 6 lipca 2018 przez Layoutowiec Mądrala (5,470 p.)

Ok. Tylko co jest tutaj źle:

<section id="container1">

    <div class="image">
        <img src="img/nature.jpg" style="max-width: 449px; height: 400px" alt="alternative text"></a>
    </div>

    <p class="text1">
        NATURE
    </p>    


    <div class="image">
        <img src="img/mountains.jpg" style="width: 449px; height: 400px"  alt="alternative text"></a>
    </div>

    <p class="text2" style="padding-left: 440px;">
        MOUNTAINS
    </p>    


    <div class="image">
        <img src="img/sea.jpg" style="width: 449px; height: 400px"  alt="alternative text"></a>
    </div>
  
    <p class="text3" style="padding-left: 1000px;">
        SEA
    </p>    


    <div class="image">
        <img src="img/cliff.jpg" style="width: 449px; height: 400px" alt="alternative text"></a>
    </div>

    <p class="text4">
        CLIFF
    </p>    
    

    <div class="image">
        <img src="img/city.jpg" style="width: 449px; height: 400px"  alt="alternative text"></a>
    </div>

    <p class="text5">
        CITY
    </p>    
    

    <div class="image">
        <img src="img/freedom.jpg" style="width: 449px; height: 400px"  alt="alternative text"></a>
    </div>
    
    <p class="text6">
        FREEDOM
    </p>    

    <div style="clear:both"></div>

</section>

#container1
{
    margin-top: 36%;
    height: 100%;
    width: 100%;
    float: left;
}

.image
{

    display: flex;
    float: left;
    position:relative;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 360px) {
    .image {width: 100%; margin-right: 0; margin-left: 0; padding: 0; float: none;} 
}

No i na laptopie wszystko jest dobrze ale w media queries ustawiam aby zdjecię zajmowało 100% ekranu a wychodzi poza przez co pojawia się dodatkowy pasek z przewijaniem lewo-prawo

Moje pytanie brzmi: dlaczego..?

odpowiedź 6 lipca 2018 przez thryndl Nałogowiec (30,470 p.)

Wykorzystaj do tego flexboxa.

Dajesz na element rodzica

display: flex;
flex-direction: row;
flex-wrap: wrap;

Dzięki temu każdy element dziecko (w tym przypadku powinny to być zdjęcia) będą układane w rzędzie, a w momencie, kiedy nie będą się mieściły, będą przerzucane do nowego rzędu.

Pokaż 9 poprzednich komentarzy