• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyrównanie img w poziomie bez scroll'a

0 głosów
150 wizyt
pytanie zadane 4 grudnia 2017 w HTML i CSS przez Borówa Dyskutant (8,370 p.)

Cześć,

prośba o pomoc: próbuję ustawić elementy jeden obok drugiego ale wciska się nie wiedzieć czemu scroll. Czy możecie mi wyjaśnić jak to zrobić prawidłowo i wyjaśnić dlaczego tak się dzieje? 

        <section id="natura"><a href="#"><img src="img/natura/dzie%C5%84%206%20(56).jpg" alt="#"></a></section>
        <section id="artystyczne"><a href="#"><img src="img/artystyczne/PierzchalskaKarolina_MG_1552.JPG" alt="#"></a></section>
        <section id="dzieci"><a href="#"><img src="img/dzieci/_MG_0327.jpg" alt="#"></a></section>
        <section id="repotaz"><a href="#"><img src="img/repotraz/1920951_305450292991086_3000872418126524721_o.jpg" alt="#"></a></section>
        <section id="portrety"><a href="#"><img src="img/portrety/10542011_305890896280359_8729694179108008196_n.jpg" alt="#"></a></section>
        <section id="zwierzeta"><a href="#"><img src="img/zwierzeta/IMG_5485%20kopia.JPG" alt="#"></a></section>
section {
    width: 100vw;
}

section img {
    width: 20vw;
    height: 50vh;
    overflow: hidden;
    float: left;
}

 

1 odpowiedź

0 głosów
odpowiedź 4 grudnia 2017 przez Chess Szeryf (75,190 p.)
edycja 4 grudnia 2017 przez Chess

Dodaj do body właściwość:

body{ 
   margin:0;
}

Edit:

Dlaczego? Ponieważ body oraz niektóre inne znaczniki mają domyślne style, więc jak ktoś chce to może je wyzerować.

Typical default display properties:

body {
display: block;
margin: 8px; 
}

body:focus {
outline: none; 
}

Dodaje bodajże z każdej strony po 8px marginesu, a Ty masz pięć elementów o szerokości 20vw, więc jeśli nie wyzerujesz margin na 0, to doda scroll'a, ponieważ cały content strony nie mieści się. 5*20vw+8px*2=100vw+16px. O 16px content wychodzi poza obszar ekranu, jak widać.

Jest jeszcze inne rozwiązanie, możesz napisać tak:

*{
   overflow-x:hidden;
}

Ale po tym rozwiązaniu, to co wyjdzie poza obszar ekranu, to nie będziesz mógł przewinąć scroll'em.

https://www.w3.org/TR/2011/WD-html-markup-20110525/body.html#body

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body

komentarz 4 grudnia 2017 przez Borówa Dyskutant (8,370 p.)

To nie to (chyba, że coś skopałem)

w css mam :

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

i nic to nie zmienia...

komentarz 4 grudnia 2017 przez Borówa Dyskutant (8,370 p.)
Chociaż teraz jak się zastanowiłem to pewnie pionowy scroll bierze parę px i pewnie dlatego tworzy się ten poziomy.
komentarz 4 grudnia 2017 przez Chess Szeryf (75,190 p.)

U mnie jest OK. Znajdź u siebie te(n) znacznik(i) i/lub właściwoś(c/ć)/(i), które rozpychają ci tego body, czy co tam masz. Utwórz nowy projekt (plik) wklej tylko ten HTML, co podałeś w pytaniu i tylko ten CSS + do tego tylko to:
 

body {
   margin:0;
}

 

Podobne pytania

0 głosów
1 odpowiedź 247 wizyt
pytanie zadane 1 maja 2017 w HTML i CSS przez maciek77 Użytkownik (830 p.)
0 głosów
2 odpowiedzi 57 wizyt
pytanie zadane 13 października w HTML i CSS przez ferdynand Użytkownik (680 p.)
0 głosów
1 odpowiedź 318 wizyt
pytanie zadane 30 marca 2019 w HTML i CSS przez JakuBB Nowicjusz (220 p.)

85,875 zapytań

134,650 odpowiedzi

298,919 komentarzy

56,743 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 1048p. - rucin93
  2. 1042p. - Whistleroosh
  3. 989p. - adrian17
  4. 984p. - Mikbac
  5. 982p. - Mateusz Bogdan
  6. 977p. - Michal Drewniak
  7. 967p. - nidomika
  8. 859p. - CC PL
  9. 854p. - Argeento
  10. 757p. - ScriptyChris
  11. 692p. - s. Dorota Kowalewska
  12. 683p. - tokox
  13. 660p. - Vinox
  14. 645p. - TheLukaszNs
  15. 628p. - WhiskeyTaster
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...