Autor Zpráva
opricnik
Profil *
Ako urobit medzery medzi zasebou nasledujucimi elementami tak aby ten margin-right nebol na konci riadku
ide mi o to aby cele riesenie bolo responzivne aby sa na mensej obrazovke elementy zalamovali pod seba a aby na konci ziadneho riadku nebol margin-right iba medzi elementami, :last-cild je v ramci zalamovania nepouzitelny. Vymyslel som toto:

<section id="section1">
    <div class="wrap">
        <article class="col"></article>
        <article class="col"></article>
        <article class="col"></article>
        <article class="col"></article>
    </div>
</section>

#section1
{
       margin: 0 auto;
       max-width: 1170px;
       overflow: hidden;
}

.wrap
{
       width: auto;
       margin-right: -20px;
       font-size: 0;
       text-align: center;
}

.col
{
      font-size: 15px;
      width: 150px;
      height: 150px;
      display: inline-block;
      margin: 0 20px 20px 0;
      vertical-align: top;
}

Ale urcite existuje nieco jednoduchsie. Vadi mi tam hlavne ten overflow: hidden; a zbytocny div
Tomáš123
Profil
opricnik:
tak aby ten margin-right nebol na konci riadku
Alternatívou je pridať responzívnu deklaráciu a vonkajší okraj (margin) tam natvrdo zrušiť. To sa ti ale pravdepodobne nehodí, keďže je zbytočné pridávať responzívnu deklaráciu v prípade, že je obsah relatívne responzívny aj bez nej.

Druhé riešenie predpokladá, že články v sekcii chceš mať odsadené vnútorným okrajom (padding). Vyzeralo by nejako takto: zdroj, ukážka.
QQq
Profil *
.col:last-child {
margin-right: 0;
}
Marschmallow
Profil
QQq:
opricnik jasně říká, že nechce používat last-child. Je to z toho důvodu, že pokud se bude lámat mezi druhým a třetím elementem, ničemu to nepomůže.
dalik
Profil
:nth-child
Chamurappi
Profil
Reaguji na dalika:
To mu také nepomůže, když neví, po kolika blocích se zalamuje.


Reaguji na opricnika:
Ale urcite existuje nieco jednoduchsie. Vadi mi tam hlavne ten overflow: hidden; a zbytocny div
Jestli jsem správně pochopil situaci, myslím, že nic jednoduššího není.
Mně by tam spíš vadily ty ostatní elementy, protože nefungují ve starších prohlížečích. A písmo v px nejde v Explorerech zvětšovat.

Možná by šlo využít jev, který při skládání inline-blocků většinou vadí, tedy meziblokovou mezeru způsobenou bílými znaky v kódu. Měla by jít ovlivnit word-spacingem, ale nezkoušel jsem, zřejmě to nebude použitelné, protože se tím jen přidává ke standardní mezeře, jejíž velikost je neznámá.
dalik
Profil
Chamurappi:
To je pravda, nevšiml jsem si.

opricnik:
Lepší řešení mě teď taky nenapadá, ale můžeš upravit margin: 0 20px 20px 0; u .col na margin: 0 10px 20px 10px;
Tím pádem nemusíš používat overflow a záporný margin.
Str4wberry
Profil
Šlo by podle @media pravidla na základě šířky poznat, kde se momentálně nemá margin vytvořit (pomocí nth-child selektorů).

Podobně jako se u Responsivní CSS mřížka mění šířka boxů v závislosti na šířce viewportu. Na konci toho článku je dost podobný příklad.

Jinak ten inline-block bych nedoporučoval kvůli problémům s bílými znaky používat.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: