Předmět Autor Datum
Co přesně chceš? Aby se jakýkoliv text zarovnal na 2 řádky nebo chceš příliš dlouhý text rozdělit me…
Killer of amphibians 29.07.2018 20:34
Killer of amphibians
Pochopitelně, že dlouhý text. U krátkého textu by to ani nedávalo smysl. V mém případě dlouhý text k…
MichalDM 29.07.2018 20:42
MichalDM
Ohraničení klasického pole si zkoušel? Text by se pak měl zalomit sám když vytyčíš imaginární pole k…
Killer of amphibians 29.07.2018 20:44
Killer of amphibians
Ohraničení nemá vliv na zobrazení textu. border-style: solid; border-width: 2px;
MichalDM 29.07.2018 21:03
MichalDM
To by pak text lítal všude :-) Nesmíš ohraničit výplň či tvar ale text (nebo obsah) - záleží jestli…
Killer of amphibians 29.07.2018 21:05
Killer of amphibians
Proč neukážeš přímo kód? Takhle se můžeme jenom dohadovat, proč ti to nefunguje.
Wikan 29.07.2018 21:05
Wikan
... <li class="product"> <a class="image" href="path"> <img width="500" height="500"... /> </a> <a h…
MichalDM 29.07.2018 23:16
MichalDM
Pokud možno celý kód. Všimni si také, že sám máš v názvu dotazu "CSS" ale samotné CSS jsi nikde neuv…
Wikan 30.07.2018 08:02
Wikan
Tady máš názornou ukázku. Vpravo je vše v pořádku, ale Vlevo ne, protože je text příliš dlouhý a ro…
MichalDM 22.08.2018 20:35
MichalDM
Pokud možno celý kód. Všimni si také, že sám máš v názvu dotazu "CSS" ale samotné CSS jsi nikde neuv…
Mlocik97 22.08.2018 20:47
Mlocik97
Jak si přeješ.
MichalDM 22.08.2018 22:06
MichalDM
Malo by stačiť nastaviť tomu elementu vľavo maximálnu šírku a spôsob zobrazovania (display) na inlin…
moose 23.08.2018 04:39
moose
Je to tak. @MichalDM Vy máte momentálně ten titulek i tu cenu jako řádkové elementy v jednom bloku…
navay 23.08.2018 08:16
navay
Díky, nakonec jsem to udělal jinak. (Spanu, ve kterém je cena, jsem nastavil display: flex) Je to po…
MichalDM 23.08.2018 18:17
MichalDM
Odporúčam prečítať: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ a https://www.w3.org/TR/… poslední
Mlocik97 23.08.2018 19:12
Mlocik97

Ohraničení klasického pole si zkoušel? Text by se pak měl zalomit sám když vytyčíš imaginární pole kam text může a kam ne. Tzn. zadáš parametry pro rozsah bloku. Může to být buď přes procenta nebo přímo přes pixely.

...
<li class="product">
    <a class="image" href="path">
        <img width="500" height="500"... />	
    </a>
    <a href="path">
        <strong>Long title</strong>
    </a>
    <span class="price"><strong><p>65,00 K&#269; bez DPH</p></strong><p>(75,00 K&#269; s DPH)</p></span>
...

Zobrazí se obrázek. Pod ním se vlevo zobrazí název a vpravo se zobrazí pod sebou dva názvy.
Pokud je však název vlevo příliš dlouhý a zasahuje do názvů vpravo, názvy vpravo se posunou dolů.
Nejen, že to vypadá nevzhledně, ale taky se změní jeho výška.
Pod obrázkem je však dost místa, aby se příliš dlouhý text zobrazoval na dvou řádcích. - To by celý problém vyřešilo

Je to tak.

@MichalDM
Vy máte momentálně ten titulek i tu cenu jako řádkové elementy v jednom bloku dohromady. Ten titulek dosáhne konce řádku až na konci celého boxu s produktem a odsune další řádek s cenou vždy pod sebe. Musíte je buďto obalit do samostatných bloků (třeba div-ů), nebo jak radí moose je v CSS převést na inline-block.

Díky, nakonec jsem to udělal jinak. (Spanu, ve kterém je cena, jsem nastavil display: flex) Je to pouze seznam souvisejících produktů na konci stránky, takže to vadit nebude. (Běžně se u produktu to zobrazuje pod sebou)

Jen jsem se chtěl zeptat, jaký je rozdíl mezi

display: flex;

a

display: inline-flex;

V obou případech se to zobrazuje stejně, takže v čem je, prosím Vás, vlastně rozdíl?

Zpět do poradny Odpovědět na původní otázku Nahoru