| Autor | Zpráva | ||
|---|---|---|---|
| opricnik Profil * |
#1 · Zasláno: 30. 12. 2014, 22:56:10
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 |
#2 · Zasláno: 31. 12. 2014, 10:51:24
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 * |
#3 · Zasláno: 31. 12. 2014, 16:08:06
.col:last-child {
margin-right: 0;
} |
||
| Marschmallow Profil |
#4 · Zasláno: 31. 12. 2014, 16:39:17
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 |
#5 · Zasláno: 1. 1. 2015, 23:04:20
:nth-child
|
||
| Chamurappi Profil |
#6 · Zasláno: 2. 1. 2015, 07:28:05
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 |
#7 · Zasláno: 2. 1. 2015, 16:54:17
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 |
#8 · Zasláno: 2. 1. 2015, 18:29:12
Š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.
|
||
|
Časová prodleva: 9 let
|
|||
0