| Autor | Zpráva | ||
|---|---|---|---|
| Robbie Profil * |
#1 · Zasláno: 26. 5. 2016, 17:02:13
Zdravím, chtěl jsem se optat, jak řešíte svislou čáru např. když chci rozdělit footer jakoby dvěma svislými čárami, když jsem si udělal 3 divy.
Děkuji |
||
| Lonanek Profil |
#2 · Zasláno: 26. 5. 2016, 17:05:01
u středního divu nepomůže nastavit border-left a border-right?
|
||
| Tomáš123 Profil |
Robbie:
Bežne riešim takéto situácie deklaráciou prvok + prvok {border-left: 2px solid gray}.
ÚPRAVA: Zabudol som na jedno upozornenie. V prípade obsahového box-modelu ( box-sizing: content-box) šírka definuje vnútorný rozmer prvku, miesto pre obsah, a rámčeky (borders) a vnútorné okraje (paddings) zväčšujú celkový rozmer prvku. Ak je priestor rozdelený napríklad na polovicu nejakými relatívnymi jednotkami (ako percentá), prvky sa vedľa seba aj napriek prepočítaným rozmerom nevojdú.
Riešiť to ide viacerými spôsobmi: – nedobre podporované riešenie pomocou vlastnosti calc() (od IE9)
– okrajový box-model (kde hodnota šírky určuje celkový rozmer prvku aj s vnútorným okrajom a rámčekom) (podporované od IE8) – „matrioška“, kde sa prvky vnoria do seba (spoľahlivé riešenie): <style>
.obal {width: 100%; margin: auto;}
.stlpec {width: 50%; float: left;}
.obsah {padding: .8em}
.stlpec + .stlpec .obsah {border-left: 1px solid gray}
</style>
<div class="obal">
<div class="stlpec">
<div class="obsah">...</div>
</div>
<div class="stlpec">
<div class="obsah">...</div>
</div>
<div style="clear: both"></div>
</div>Rozdiely v prepočítavaní rozmerov prvkov totiž vznikajú iba pri hodnote šírky ( width) inej ako auto.
Nevýhodou takto okresaného riešenia je neschopnosť vysporiadať sa s rôznou výškou stĺpcov (konkrétne problém vzniká iba v prípade, keď je pravý stĺpec výrazne nižší). Na to ale existuje niekoľko riešení: Sloupce stejně vysoké... Popis symbolu +: Seznam všech CSS 3 selektorů.
|
||
|
Časová prodleva: 8 let
|
|||
0