Jak mít stejně dlouhé alementy – CSS – Fórum – Programujte.com

Ahoj, prosím jak sjednotit délku elementů s textem podle toho nejdelšího tak, aby byly všechny stejně dlouhé? Děkuji všem za rady.

Plné rozlišení v pořádku:

Připojen obrázek.

Připojen obrázek.

Při nižším rozlišení se to rozhází v ohledu na množství textu:

Připojen obrázek

Připojen obr

Připojen obrázek.

Na takovy dotaz se neda prilis odpovedet…
Otazkou je, ceho se snazis docilit a za jakym ucelem?
Pokud ti jde jen o podbarveni, tak je mozne to zkratka obalit divem.
Pokud to floatujes, pak je nutne spravne pouzit clear nebo display:inline-block. Cili, neumis floatovat, normalni clovek se mu tedy vyhyba.
A ostatni se da resit googlem

- html table, tr, td
- css display:table, table-row, table-cell + google
- css flex layout
- css height
- js height

je to klasický seznam <ul><li>.

Snažím se docílit, aby to hezky vypadalo ve všech rozlišeních.

Je irelevantní jak to dělám, otázkou je jak to dělat mám. Představ si to tak, že bych to měl dělat od nuly. Jak to udělat, aby všechny dílky byly stejně dlouhé. Tzn. aby se všechny sloupečky přizpůsobili délce toho nejdelšího z nich.

Já tomu nerozumím, ale intuitivně bych řekl, že ty vnitřní elementy musí být nastylované tak, aby vyplnily ten vnější, který je ohraničuje.

Zkusil jsem, jak radil peter, table-cell a přesně to to udělalo.

Můj problém v emulátoru: https://jsfiddle.net/2L14okdx/

Můj problém po přidání table, table-row, table-cell došlo k rozházení, nejspíš špatná implementace z mé strany: https://jsfiddle.net/2L14okdx/1/

V čem je problém?

Mozna to bude hloupa narazka, ale tvuj kod je jako tvuj dotaz. Ani jedno nechapu.

google = css table layout

https://www.jakpsatweb.cz/css/table-layout.html - tak tam pisou kraviny, misto aby dali priklad.
https://developer.mozilla.org/…table-layout - tam priklady nahore sice jsou, ale pres copy/paste to nezkopirujes, ale mozna jeco z tech dole....
https://www.itnetwork.cz/…esky-manual/ - a to je uplne naprd :)

google = css display table-row

https://css-tricks.com/almanac/properties/d/display/

upravim si toto  

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      Gross but sometimes useful.
    </div>
  </div>
</div>

<div style="display: table;">
  <div style="display: table-row; width:300px;">
    <div style="display: table-cell; width:100px; border:1px solid #f00;">
      Gross but 
    </div>
    <div style="display: table-cell; width:100px; border:1px solid #f00;">
      Gross but sometimes useful.
    </div>
    <div style="display: table-cell; width:100px; border:1px solid #f00;">
      Gross but sometimes 
    </div>
  </div>
</div>

https://jsfiddle.net/xgkju6sq/

Podle mne se to funguje spravne. Pokud samozrejme vis, jak se v html vytvari tabulka, kam prijde tag table, tr, td.
Samozrejme, druha vec je konstrukce s UL, LI. To jsi prvne nerekl a telepatii neumime.
table, tr, td -> div, ul, li


PS. A tohle je ma uplne posl. zprava do tohoto forka. VE FF nejde nic napsat, protoze se nezobrazi google captcha. A v edge se neda nic napsat, protoze nahodile skace ve zprave kurzor, pri psani, pri copy-paste, pri vkladani kodu (tam to tusim skoci na zacatek zpravy a vlozi kod). Snazil jsem se na tento problem upozornit 2 roky v navrzich na vylepseni, zadne reseni neprobehlo….
Ted jsem se pri vytvareni teto zpravy asi 20 min rozciloval. Co by mi jindy zabralo 5 min. I s kodem a vsim… To nemam zapotrebi.
Treba, kdyz drzim page-down, take si to skace, jak chce.
Take se provadi jakysi refresh periodicky s casem, kde si kurzor odskoci.

Ono je to mozna tim, ze mam ve FF zaply adblok a mozna ten parazitni script mi to blokuje, proto to nezlobi. Ale zas to asi blokuje tu captchu. Ale na jinech strankach mi google captcha normalne beha.
Takze si myslim, ze autor tu ma na strance nejaky bordel, virus.

Mrzí mě, že máš s fórem takovéto problémy. Jsi profík a už párkrát si mi zde pomohl, tak jako dnes. Děkuji ti, už mi to funguje: https://jsfiddle.net/vd4L69n1/ musel jsem ořezat moje předchozí styly, které to rozbíjeli. Teď se pokusím to nějak sloučit s těmi styly co tam původně byly.

Děkuji ti, že jsi nade mnou nezlomil hůl s tím, že jsem neschopný, ale vysvětlil jsi mi to polopatě na příkladu.   

Ak nepotrebuješ nejakú extrémne šialenú spätnú kompatibilitu, tak to stačí urobiť takto:
http://kod.djpw.cz/inqc