| Autor | Zpráva | ||
|---|---|---|---|
| wordikkk Profil * |
#1 · Zasláno: 27. 11. 2017, 22:17:09
Ahoj,
řeším problém s využítím flexboxu a zárovnání v obsahu v něm. Potřebuji mít vedle sebe 5 responzivních sloupců a každý z nich obsahuje nadpis jiné délky, obrázek stejné velikosti a dále tlačítko Zjistit více, které by se mělo zobrazit úplně na konci kontejneru, tzn.: xxxNADPISxxx...........xxxNADPISxxx xxxOBRÁZEKxxx.........xxxOBRÁZEKxxx xxxxxxxxxxxxxx.......xxxxxxxxxxxxxx xxxTLAČÍTKOxxx........xxxTLAČÍTKOxxx HTML: <div class="row containerx">
<div class="col-xs-12 col-sm-2 col-sm-offset-1 col-md-2 col-md-offset-1 box itemx">
<div class="title"><h3>Lorem ipsum dolor sit amet</h3></div>
<div class="image"><img src="assets/img/image.jpg" class="img-responsive" /></div>
<div class="text">
<input type="submit" value="Zjistit více">
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 box itemx">
<div class="clinic-title"><h3>Lorem ipsum dolor sit</h3></div>
<div class="clinic-image"><img src="assets/img/image.jpg" class="img-responsive" /></div>
<div class="text">
<input type="submit" value="Zjistit více">
</div>
</div>
...
</div>CSS: .box{
border:1px solid #005fb9;
margin-top:20px;
}
.containerx {
display: flex;
flex-direction: row;
justify-content: space-between;
align-self: flex-end;
}
.itemx {
margin: 5px;
}Aktuální stav: 
|
||
| Kcko Profil |
.itemx {
margin: 5px;
display: flex;
flex-wrap: wrap;
}
.itemx .text
{
align-self: flex-end;
} |
||
| wordikkk Profil * |
#3 · Zasláno: 28. 11. 2017, 19:23:48
Kcko:
Ahoj, super to je ono! Děkuji moc za rychlou odpověď. |
||
|
Časová prodleva: 3 měsíce
|
|||
| Anonymouz Profil * |
#4 · Zasláno: 20. 2. 2018, 16:55:34
Mám kontaktní formulář, který je poskládaný na dva sloupce. kde captcha a tlačítko odeslat je v levém sloupci. Potřeboval bych přijít na to, jak na mobilní verzi přesunout captchu a tlačítko odeslat uplně na poslední místo. Zkoušel jsem to přes flex box viz odkaz. Pomůže mi s tím někdo?
Živá ukázka |
||
| Kcko Profil |
#5 · Zasláno: 20. 2. 2018, 21:31:59
Anonymouz:
Takhle: Živá ukázka Ale je to celkem prasárna, radši bych vytvořil druhý formulář jen pro mobilní zobrazení nebo to udělal uplně celé jinak. |
||
| Anonymouz Profil * |
#6 · Zasláno: 21. 2. 2018, 08:34:36
Mrknul jsem na to, ale bohužel se mi kočka se salátem dostává mezi captchu a tlačítko odeslat. Celé to udělat jinak máš na mysli bez pomoci tabulky, nebo úplně jiné rozložení?
|
||
| Kcko Profil |
#7 · Zasláno: 21. 2. 2018, 18:07:13
Anonymouz:
Živá ukázka Upřímně, tím jak idiotsky je to pojmenované se v tom ztrácím a nevidím ani smysl takové tabulky a dělat takové harakiri, abys něco někam přesunul; ale ted máš ukázku dle toho jak sis přál. |
||
| Anonymouz Profil * |
#8 · Zasláno: 23. 2. 2018, 14:31:57
Je to normální kontaktní formulář. V příkladu je psané pouze lorem ipsum, protože si myslím, že to pro ukázku stačí. Šlo by tam napsat inputy atd., ale takto to jako mustr stačí. Je jedno jak se který input jmenuje.
Prostě jde pouze o to, že formulář má být rozdělen na dva stejně dlouhé sloupce (bez mezer), přičemž je požadavek, aby kontaktní informace byli vlevo a doplňkové o produktu vpravo. Proto je to na PC rozdělené takto. Jenže na mobilní verzi by to znamenalo, že captcha a tlačítko odeslat by bylo uprostřed formuláře, což není ideální, když ještě následují buňky k vyplnění. Myslel jsem, že když flexbox dovede pracovat s pořadím, že na tohle bude dobrá volba, ale vidím, že s ním jsou pouze problémy. |
||
|
Časová prodleva: 6 let
|
|||
0