• 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

VPS Starter Arubacloud
0 głosów
207 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 (76,710 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 (76,710 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ź 365 wizyt
pytanie zadane 1 maja 2017 w HTML i CSS przez maciek77 Użytkownik (830 p.)
0 głosów
2 odpowiedzi 261 wizyt
pytanie zadane 13 października 2021 w HTML i CSS przez ferdynand Obywatel (1,250 p.)
0 głosów
1 odpowiedź 537 wizyt
pytanie zadane 30 marca 2019 w HTML i CSS przez JakuBB Nowicjusz (220 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...