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

question-closed Div'y bez przerwy

Object Storage Arubacloud
0 głosów
199 wizyt
pytanie zadane 21 kwietnia 2017 w HTML i CSS przez Włóczykij Użytkownik (750 p.)
zamknięte 21 kwietnia 2017 przez Włóczykij

Siema

Mam taki kod

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam, et ea blanditiis saepe, eum consectetur at odit cumque consequuntur fuga explicabo nesciunt. Suscipit expedita qui minus, optio tempora velit!
    </div>
        <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam, et ea blanditiis saepe, eum consectetur at odit cumque consequuntur fuga explicabo nesciunt. Suscipit expedita qui minus, optio tempora velit!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis itaque quaerat sunt ducimus repellat libero modi voluptas dolorem atque, accusantium nesciunt magnam quae fugit iure eum sed voluptatem! Expedita, incidunt.
    </div>
        <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam, et ea blanditiis saepe, eum consectetur at odit cumque consequuntur fuga explicabo nesciunt. Suscipit expedita qui minus, optio tempora velit!
    </div>
        <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam, et ea blanditiis saepe, eum consectetur at odit cumque consequuntur fuga explicabo nesciunt. Suscipit expedita qui minus, optio tempora velit!
    </div>
        <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam, et ea blanditiis saepe, eum consectetur at odit cumque consequuntur fuga explicabo nesciunt. Suscipit expedita qui minus, optio tempora velit!
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam, et ea blanditiis saepe, eum consectetur at odit cumque consequuntur fuga explicabo nesciunt. Suscipit expedita qui minus, optio tempora velit!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis itaque quaerat sunt ducimus repellat libero modi voluptas dolorem atque, accusantium nesciunt magnam quae fugit iure eum sed voluptatem! Expedita, incidunt.
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam, et ea blanditiis saepe, eum consectetur at odit cumque consequuntur fuga explicabo nesciunt. Suscipit expedita qui minus, optio tempora velit!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis itaque quaerat sunt ducimus repellat libero modi voluptas dolorem atque, accusantium nesciunt magnam quae fugit iure eum sed voluptatem! Expedita, incidunt.
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam, et ea blanditiis saepe, eum consectetur at odit cumque consequuntur fuga explicabo nesciunt. Suscipit expedita qui minus, optio tempora velit!
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam, et ea blanditiis saepe, eum consectetur at odit cumque consequuntur fuga explicabo nesciunt. Suscipit expedita qui minus, optio tempora velit!
    </div>

  </body>
</html>
body{
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
          }

          .box{
            width: 280px;
            margin: 10px;
            border: solid 1px;
            border-radius: 5px;
            padding: 10px;
            float: left;
}

Codepen

I chciałbym pozbyć się tych pionowych przerw miedzy div'ami,  żeby każdy następny pojawiał się po prawej stronie albo zaraz poniżej tego po lewej. Czy jest możliwość zrobienia tego???

 

komentarz zamknięcia: Temat rozwiązany

2 odpowiedzi

+1 głos
odpowiedź 21 kwietnia 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)
wybrane 21 kwietnia 2017 przez Włóczykij
 
Najlepsza

Hej, ja na twoim miejscu wyrzuciłabym float: left z klasy box i zamiast tego dała:

body{
  column-count:3;
} 

To powinno pomóc. Albo jakaś zabawa flex-boxem może by tu coś pomogła. Pozdrawiam

komentarz 21 kwietnia 2017 przez Włóczykij Użytkownik (750 p.)

Dzięki smiley działa

0 głosów
odpowiedź 21 kwietnia 2017 przez niezalogowany
margin: 0px;

Podobne pytania

0 głosów
1 odpowiedź 272 wizyt
pytanie zadane 5 października 2016 w HTML i CSS przez Mr Popcorn Bywalec (2,340 p.)
0 głosów
2 odpowiedzi 562 wizyt
pytanie zadane 6 marca 2020 w Systemy operacyjne, programy przez roksek Nowicjusz (240 p.)
0 głosów
1 odpowiedź 549 wizyt
pytanie zadane 15 grudnia 2019 w PHP przez Lodomir Początkujący (480 p.)

92,565 zapytań

141,416 odpowiedzi

319,599 komentarzy

61,950 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...