• 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

VPS Starter 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ź 271 wizyt
pytanie zadane 5 października 2016 w HTML i CSS przez Mr Popcorn Bywalec (2,340 p.)
0 głosów
2 odpowiedzi 547 wizyt
pytanie zadane 6 marca 2020 w Systemy operacyjne, programy przez roksek Nowicjusz (240 p.)
0 głosów
1 odpowiedź 513 wizyt
pytanie zadane 15 grudnia 2019 w PHP przez Lodomir Początkujący (480 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 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!

...