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

Problem z ułożeniem elementów w kolumnach

Object Storage Arubacloud
0 głosów
135 wizyt
pytanie zadane 6 marca 2019 w HTML i CSS przez bugs55 Obywatel (1,090 p.)

Cześć wszystkim!

Piszę stronę pod Wordpressa i walczę z ułożeniem miniatur postów. Zależy mi na takim efekcie:

Zastosowałem tutaj kolumny, jednak elementy ustawiają się w ten sposób:
1 3 5
2 4 6
A chciałbym aby ustawiały się w ten:
1 2 3
4 5 6

Proszę o pomoc w rozwiązaniu tego problemu  :)

Z góry dziękuję za pomoc.

<!DOCTYPE html>
<html lang="pl-PL">

<head>
<title>He Reads! | Z książką w ręce</title>
<meta charset="utf-8">
<meta name="author" content="Konrad Szczepanowski">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style/css-reset.css">
<link rel="stylesheet" href="fontello/css/fontello.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>

<body>
<header>
    <div class="container">
        <img src="img/hereads-logo.png" alt="He Reads!" class="float">
        <nav class="float">
            <ul>
                <li><a href="#">Książka</a></li>
                <li><a href="#">Serial</a></li>
                <li><a href="#">Wylosuj</a></li>
            </ul>
        </nav>
        <div style="clear: both;"></div>
    </div>
</header>
<div class="container container2">
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero?</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
</div>
</body>

</html>
.container {
  max-width: 1140px;
  min-width: 360px;
  padding: 0 15px 0 15px;
  margin: auto;
}
.float {
  float: left;
}
body {
  background-color: #E5E5E5;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}
/*------NAGŁÓWEK------*/
header {
  background-color: #fff;
  font-size: 1em;
  border-bottom: 4px solid #E88F30;
  font-weight: 800;
  overflow: auto;
  /*padding: 25px 0;*/
  height: 120px;
  box-shadow: 0 5px 20px #c2c2c2;
  top: 0;
  width: 100%;
}
header .container {
  -ms-transform: translateY(30%);
  transform: translateY(30%);
}
header img {
  width: 250px;
  margin-right: 30px;
}
header nav {
  text-transform: uppercase;
  /*padding: 20px 0 0;*/
  box-sizing: border-box;
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}
header nav ul li {
  float: left;
  padding: 10px;
  border-radius: 7px;
  -webkit-transition: background-color 0.3s ease-in-out;
  -moz-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
header nav ul li:hover {
  background-color: #EDB034;
}
header nav ul li a:link {
  color: #121212;
  text-decoration: none;
}
header nav ul li a:hover {
  text-decoration: none;
}
header nav ul li a:visited {
  color: #121212;
}
/*------POST------*/
.container2 {
  margin-top: 40px;
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-width: 360px;
}
.post {
  background-color: #fff;
  margin: 0 25px 20px 0;
  width: 360px;
  border-radius: 15px;
  display: inline-block;
  -webkit-transition: box-shadow 0.2s ease-in-out;
  -moz-transition: box-shadow 0.2s ease-in-out;
  -o-transition: box-shadow 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out;
}
.post img {
  width: inherit;
  border-radius: 15px 15px 0 0;
}
.post:hover {
  box-shadow: 10px 10px 35px #b9b9b9;
}
.post-inside {
  padding: 20px 30px;
  overflow: auto;
}
.post-inside * {
  margin-bottom: 8px;
}
.post-inside h3 {
  font-weight: 800;
  font-size: 1.1em;
  line-height: 20px;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.post-inside h3:hover {
  color: #EDB034;
  cursor: pointer;
}
.post-inside .article-min {
  text-align: justify;
  font-size: 0.9em;
  line-height: 16px;
}
.post-inside .more {
  font-weight: 800;
  font-size: 0.95em;
  margin-bottom: 0;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.post-inside .more .more-text,
.post-inside .more i {
  float: right;
}
.post-inside .more i {
  margin-left: 5px;
  font-size: 1.2em;
}
.post-inside .more:hover {
  color: #EDB034;
  cursor: pointer;
}
.meta {
  height: 20px;
  color: #444444;
}
.meta i::before {
  margin: 0;
}
.meta i {
  margin-right: 5px;
  font-size: 0.95em;
  line-height: 20px;
}
.meta .text {
  font-size: 0.7em;
  line-height: 20px;
}
.meta div.float {
  height: 7px;
}
.meta .author {
  width: 160px;
}
.meta .date {
  width: 90px;
}
.meta .comments {
  width: 30px;
}

 

1
 komentarz 6 marca 2019 przez shotokan Nałogowiec (39,660 p.)
Nie łatwiej byłoby zastosować flexboxa?
 komentarz 6 marca 2019 przez bugs55 Obywatel (1,090 p.)
Próbowałem, ale nie wiem jak z flexboxem uzyskać taki efekt. Jeśli Ty wiesz to, proszę, podziel się.
 komentarz 6 marca 2019 przez pablop76 VIP (123,180 p.)
zamiast column-count
 komentarz 7 marca 2019 przez bugs55 Obywatel (1,090 p.)
Hm? Co zamiast?
 komentarz 8 marca 2019 przez pablop76 VIP (123,180 p.)

Zamiast ustawiać kolumny za pomocą column-count użyj flexbox

1 odpowiedź

0 głosów
odpowiedź 8 marca 2019 przez niezalogowany
Użyj Flex-boksa i order

Podobne pytania

0 głosów
1 odpowiedź 256 wizyt
Jak uzyskać taki efekt w CSS?
pytanie zadane 15 grudnia 2018 w HTML i CSS przez Q7V Gaduła (4,250 p.)
0 głosów
3 odpowiedzi 1,138 wizyt
Pozycjonowanie elementów w CSS
pytanie zadane 6 stycznia 2018 w HTML i CSS przez sosick Nowicjusz (160 p.)
0 głosów
3 odpowiedzi 242 wizyt
Problem z ułożeniem elementów na stronie.
pytanie zadane 30 grudnia 2017 w HTML i CSS przez pawelwch Użytkownik (880 p.)

92,575 zapytań

141,424 odpowiedzi

319,649 komentarzy

61,960 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

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!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...