Ako vyriešiť vertical justify v CSS ?

8. 8. 2011 15:24:42

Ahojte.

Predstavte si, že máte jeden div ktorý má vertikálne rozmery. Tento div má pevne stanovené rozmery a jeho rozmery sa nesmú meniť. Text v ňom však potrebujem mať naštýlovaný tak, aby siahal od vrchu až spodok divu. Text sa však bude časom meniť, takže aj dĺžka textu bude iná.

Otázka znie ? Ako zabezpečiť niečo ako text justify nie v horizontálnej podobe ale vo vertikálnej ?

Kto mi s týmto pomôže ? Ďakujem pekne, mám s tým veľké starosti už niekoľko dní.

8. 8. 2011 15:24:42

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664423

Smazaný účet m5u2DKRief

(48 hodnocení)

8. 8. 2011 16:29:34

Nijak. K čemu takovou blbost potřebuješ? No vážně, je to blbost. Dokážeš si takový text představit?

8. 8. 2011 16:29:34

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664422

(20 hodnocení)

8. 8. 2011 16:31:31

tak takovy pozadavek slysim vubec poprve v zivote :) pokud se text nebude menit casto tak pri zmene muzes menit line-height, ale pokud to musi byt automaticke... tak me napada jen jak to resit pres javascript, ale to nebude zrovna idealni

8. 8. 2011 16:31:31

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664421

800XE

(8 hodnocení)

8. 8. 2011 16:41:37

Nechápu účel, ale taky mě napadá jedině řešení přes JS.

8. 8. 2011 16:41:37

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664420

(20 hodnocení)

8. 8. 2011 16:55:58

tady je kdyztak ukazka reseni pres JS http://www.alesi.cz/test.html ale pozor, nepocita to tak uplne s paddingem atd... takze kdzytak doupravit hodnoty v js, aby to sedelo... ale tak i tak to nedoporucuju

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
   <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
   <script>
      $(document).ready(function(){
          $('.vertical_justify').each(function(){
              var inside = $(this).find('.inside');
              var boxHeight = $(this).height();
              var lineHeight = 10;
              while(inside.height()+10 < boxHeight){
                  lineHeight = lineHeight+1;
                  inside.css('lineHeight',lineHeight+'px');
              }
          });
      });
   </script>
   
   <style>
     .vertical_justify {width: 250px; height: 400px; border: 1px solid black;}
   </style>
  </head>
  <body>
      <div class="vertical_justify">
          <div class="inside">
             zkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí
          </div>
      </div>
      
      <div class="vertical_justify">
          <div class="inside">
             zkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni zkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni text lkfj aoijf auehfadáí
          </div>
      </div>
      
      <div class="vertical_justify">
          <div class="inside">
             zkusebni text lkfj aoijf auehfadáí íšáíčáš q euhýí foufáezkusebni
          </div>
      </div>
  </body>
</html>

8. 8. 2011 16:55:58

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664419

Miloslav Lešetický

(10 hodnocení)

8. 8. 2011 17:01:03

Aleš Jiříček

Při zvětšení písma prostřednictvím prohlížeče se roztáhne i obalový DIV. Tvá rychlá ukázka má tedy limity :) Přidávám se k názoru, že požadovat něco podobného je nesmysl současnými možnostmi CSS neřešitelný. Každé podobné JS řešení bude vždy nespolehlivé, a hlavně zbytečné.

8. 8. 2011 17:01:03

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664418

(20 hodnocení)

8. 8. 2011 17:02:34

jj plavacku, zcela jiste to am limity a slo by to jeste doresit, tohle je fakt jen rychla ukazka, takovej prove of concept, pokud by to melo bezet na ostro, bylo by nejlepsi JS doupravit aby to fakt vsechno sedelo a stejne to ais nikdy nebude ulne 100%tni

8. 8. 2011 17:02:34

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664417

Smazaný účet m5u2DKRief

(48 hodnocení)

8. 8. 2011 17:12:21

Pokud se nemýlím, tak justify (zarovnání do bloku) je úplně něco jiného než vycentrování, tady vertikálně simulované pomocí line-height. Nebo jsem možná autora tématu pochopil moc doslova a měl na mysli vertikální centrování.

8. 8. 2011 17:12:21

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664416

(20 hodnocení)

8. 8. 2011 17:14:34

ono to zarovnani do bloku vertikalne je prave reseno pomoci toho JS, blbe je ze pomoci line-height to nejde na 100%, protoze se tim prave oddaluje text i od horniho a spodniho okraje (jak je dobre videt an tom JS), ale je to asi jedina moznost jak udelat to co autor tematu chtel udelat, nenapada me vubec jak jinak by se to melo udelat, mozna do JS pridat vypocet pro padding -Xpx, ale to ted tak an rychlo nevymyslim, ani vymyslet nechci... pokud autor skutecne bude neco takoveho chtit udelat, bude si muset poradit uz sam, sve moznosti jsem vycerpal

8. 8. 2011 17:14:34

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664415

probos

(1 hodnocení)

8. 8. 2011 17:17:12

Možná jsem špatně pochopil ale nemyslel náhodou vertikální centrování textu? To není stejné jako roztáhnout řádky pomocí line-height. Podle mě myslel něco jako vertical-align: middle; s tím, že text by byl centrovaný vždy na střed i když se upraví - zkrátí, rozšíří ...

Možná se pletu ...

8. 8. 2011 17:17:12

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664414

grantorino

(1 hodnocení)

8. 8. 2011 17:32:11

Nie, vertical-align: middle som nemal na mysli. Predstavte si že máte na stránke anketu ktorá má nastavené pevné rozmery. Je to kôli tomu, že inak nebude licovať s ostatnými prvkami a nebude zapadať do dizajnu. Samozrejme otázka ankedy môže byť rôzne dlhá tak isto ako aj odpovede. Keď bude text v ankete príliž krátky bude to vyzerať divne že nie je vyplnený priestor. preto som chcel niečo ako vertical justify kde by sa tie riadky alebo medzery medzi jednotlivými odpoveďami roztiahli na výšku ankety. Aby dole nevzdikla veľká medzera.

8. 8. 2011 17:32:11

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664413

Smazaný účet m5u2DKRief

(48 hodnocení)

8. 8. 2011 17:35:59

Napsal grantorino;686969
Nie, vertical-align: middle som nemal na mysli. Predstavte si že máte na stránke anketu ktorá má nastavené pevné rozmery. Je to kôli tomu, že inak nebude licovať s ostatnými prvkami a nebude zapadať do dizajnu. Samozrejme otázka ankedy môže byť rôzne dlhá tak isto ako aj odpovede. Keď bude text v ankete príliž krátky bude to vyzerať divne že nie je vyplnený priestor. preto som chcel niečo ako vertical justify kde by sa tie riadky alebo medzery medzi jednotlivými odpoveďami roztiahli na výšku ankety. Aby dole nevzdikla veľká medzera.

Aha, takže jde jen o to těm prvkům prostě nastavit pevnou výšku, ne?

8. 8. 2011 17:35:59

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/ako-vyriesit-vertical-justify-v-css/#reply664412

grantorino

(1 hodnocení)

8. 8. 2011 17:45:58

Možno by sa to tak dalo riešiť ale myslim že musí existovať aj lepšie riešenie

8. 8. 2011 17:45:58

0 0