| Autor | Zpráva | ||
|---|---|---|---|
| Kolemjdoucí Profil * |
#1 · Zasláno: 6. 3. 2017, 20:45:47
Ahoj, poradil by mi prosím někdo, jak přímo na tomto responzivním příkladu nastavit stejnou výšku u všech tří sloupců podle nejvyššího? Děkuji za pomoc.
|
||
| janky Profil |
|||
| weroro Profil |
Kolemjdoucí:
Prípadne namiesto flexu: Obaliť tie 3 stĺpce do DIV s class=stlpce .stlpce {
display:table-row;
}
#content {
width: 33%;
display:table-cell;
padding: 5px 15px;
}
#middle {
width: 33%;
display:table-cell;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
#sidebar {
width: 33%;
padding: 5px 15px;
display:table-cell;
} |
||
| Tomáš123 Profil |
#4 · Zasláno: 6. 3. 2017, 22:47:39
Kolemjdoucí, janky:
Situáciu ide rovnako dobre a s lepšou podporou riešiť aj pomocou tabuľkových hodnôt vlastnosti display.
Keďže medzery medzi stĺpcami nejde pridať iba medzi niektoré bunky, po bokoch je nutné rozdiel vyrovnať záporným marginom.
Vlastnosť margin sa v prípade tabuľkového displayu s výnimkou hodnôt table-caption, table a inline-table neaplikuje.
|
||
|
Časová prodleva: 2 měsíce
|
|||
| HonzaRJ Profil |
#5 · Zasláno: 13. 5. 2017, 22:08:41
Ahoj, potřeboval bych vysvětlit, proč se mi děje toto:
Mám levý sloupec a vedle něj obsah s fotkami. Oba v rámečku. Chtěl jsem srovnat spodní stranu levého rámečku s okrajem rámečku obsahového, protože v levém sloupci mám zatím 3 odkazy a to je vše, pod tím hafo místa. Dejme tomu že rozdíl mezi nima je asi 7 čísel. Jenže když jsem přidal paddingu levého rámečku pixely (přesně, když jsem dal víc než 361px) tak se mě pohl i okraj rámečku obsahového, čili nešli srovnat a začli se pohybovat spolu, jak jsem ubral, zase se to vrátilo. Nejsou nijak propojený, tak mě nedává smysl, proč se to děje. Měl byste pro to někdo vysvětlení? |
||
| Tomáš123 Profil |
#6 · Zasláno: 14. 5. 2017, 00:06:15
HonzaRJ:
Tu je namieste pridať aj odkaz na živú ukážku kde môžeme správanie pozorovať. |
||
|
Časová prodleva: 11 dní
|
|||
| HonzaRJ Profil |
#7 · Zasláno: 24. 5. 2017, 20:39:20
Tomáš123:
Tu je kód: <html>
<link rel="stylesheet" type="text/css" href="styl.css">
<head>
<title> Můj Gear3 </title>
</head>
<body>
<div class="hlavicka">
<img src="pictures/mesic2.jpg">
<h1> Čím dělám hluk </h1>
</div>
<div class="levy2">
<p>
<a href="Ome.html"> Zpět ke mě </a>
<br><br>
<a href="http://www.youtube.com"> Můj čenl </a>
</p>
</div>
<div class="zvuk">
<p> <h2> Moje výbavička </h2> </p>
<div class="photo">
<a href="Pictures/apik.jpg"> <img src="Pictures/apik-mini.jpg" alt="apik" width="250" height="444"> </a>
<p> ENGL </p>
</div>
<div class="photo">
<a href="Pictures/kytara.jpg"> <img src="Pictures/kytara-mini.jpg" widht="250" alt="Epi" height="444" > </a>
<p> EPIPHONE </p>
</div>
<div class="photo">
<a href="Pictures/padloboard.jpg"> <img src="Pictures/padloboard-mini.jpg" alt="efekty" width="250" height="444"> </a>
<p> EFEKTY </p>
</div>
<div class="cleaner"> </div>
</div>
<div id="footer">
Vytvořil - Jan Lenc, Edituje - Red JaHn
</div>
</body>
</html>
Stylopis pro levý sloupec a obsah:
.levy2 { margin: 3px 30px 100px 50px;
padding: 20px 132px 370px 20px;
float: left; text-align: left; color: silver;
border: 4px double silver;
border-color: black red;
}
.zvuk { margin: 33px 350px 40px 350px;
padding: 0px 50px 50px 50px;
border: 4px double silver;
border-color: red black;
text-align: center;
color: silver;
}
|
||
| Tomáš123 Profil |
HonzaRJ:
Problém bude zrejme v dive .cleaner umiestnenom vo vnútri prvku .zvuk.
Deklarácia clear: both (resp. left pre naťahovanie pravého stĺpca podľa výšky ľavého a right pre opačný účinok) spôsobí, že sa div.cleaner vykreslí až po predchádzajúcich obtekaných prvkoch. Jeho zanorenie do jedného zo stĺpcov zapríčiňuje ono rozťahovanie.
Práve toto správanie by si mohol využiť na prispôsobovanie výšky jedného stĺpca ku výške druhého bez nutnosti poznať výškový rozdiel. Je ale vyžadovaná určitá štruktúra. Nemožnosť dorovnania výšok je spôsobená akýmkoľvek marginom alebo paddingom a borderom nastavenom niektorému z vedúcich prvkov. Riešiť sa to dá záporným spodným marginom cleanera. Ak však má byť rovnakosť výšok stĺpcov viditeľná, existujú aj jednoduchšie riešenia.
Viď tiež: Sloupce stejně vysoké. |
||
|
Časová prodleva: 6 let
|
|||
0