Roztáhnutí divu do zbylé šířky stránky

24. 11. 2014 08:51:05

Ahoj,

nemůžu přijít na řešení zdánlivě triviálního úkolu a do googlu asi neumím správně zadat dotaz toho co potřebuji.

Mám čtyři divy. Potřebuji aby 2. 3 a 4. měli šířku obsahu divu (to není problém) a první aby se doplnil do zbylé šířky co je na stránce.

V css jsem zkoušel ve třídě prvniDiv nastavovat nějak vlastnost width, ale vždy se mi podařilo leda to, že se první div roztáhl na 100% šířky stránky a zbylé divy se zařadili pod něj. Potřebuji aby se ale roztáhl jen do zbytku šířky a divy zůstaly dál vedle něj.

Díky za rady.

24. 11. 2014 08:51:05

https://webtrh.cz/diskuse/roztahnuti-divu-do-zbyle-sirky-stranky/#reply1070773

Martin P

24. 11. 2014 10:01:52

Moc se v tom nevyznám, ale není teda řešení float: right?

24. 11. 2014 10:01:52

https://webtrh.cz/diskuse/roztahnuti-divu-do-zbyle-sirky-stranky/#reply1070772

Kloban

24. 11. 2014 10:26:10

Float: right jen změní pořadí divů a odsune je doprava.

Pokud zadám float: right jen u prvního divu, tak jsou u levého kraje divy 2,3,4, pak mezera a u pravého kraje div 1.

24. 11. 2014 10:26:10

https://webtrh.cz/diskuse/roztahnuti-divu-do-zbyle-sirky-stranky/#reply1070771

SEOguy

24. 11. 2014 13:09:34

co třeba:

hlavní třeba div width: 980px;

1. width: 100%; float left;

2. - 4. bude mít třeba width: 150px; float:right;

pak bych tam dal media pro responzivitu na 1-4 na width:100%

a asi bych to ošetřil i funkcí min-width

24. 11. 2014 13:09:34

https://webtrh.cz/diskuse/roztahnuti-divu-do-zbyle-sirky-stranky/#reply1070770

Kloban

15. 12. 2014 13:31:38

Tak jsem tento problém oddložil a dostal se k němu zas až teď.

Ani při tomto řešení se neroztáhne div do zbytku šířky. Roztáhne se opět přes celý hlavní div na 980px a ostatní divy se přesunou pod něj.

Napsal SEOguy;1143526
co třeba:
hlavní třeba div width: 980px;
1. width: 100%; float left;
2. - 4. bude mít třeba width: 150px; float:right;
pak bych tam dal media pro responzivitu na 1-4 na width:100%
a asi bych to ošetřil i funkcí min-width

15. 12. 2014 13:31:38

https://webtrh.cz/diskuse/roztahnuti-divu-do-zbyle-sirky-stranky/#reply1070769

Jiří

(1 hodnocení)

16. 12. 2014 10:04:30

Chvíli jsem nad tím přemýšlel a nenapadá mě jiné řešení (pokud ty rozměry nejsou předem známe už při generování zdrojového kódu), než to dodatečně upravit pomocí js, který si zjistí šířky jednotlivých elementů.

16. 12. 2014 10:04:30

https://webtrh.cz/diskuse/roztahnuti-divu-do-zbyle-sirky-stranky/#reply1070768

Jiří

(1 hodnocení)

20. 12. 2014 12:02:50

Jo, mimochodem, bral jsem to jako samozřejmost ale možná není - triviálně se tohle dá řešit tabulkou, pokud to není z nějakého důvodu na překážku.

Edit fiddle - JSFiddle

20. 12. 2014 12:02:50

https://webtrh.cz/diskuse/roztahnuti-divu-do-zbyle-sirky-stranky/#reply1070767

JKHouba

(1 hodnocení)

20. 12. 2014 12:19:38

Napsal Spocklw;1151609
Jo, mimochodem, bral jsem to jako samozřejmost ale možná není - triviálně se tohle dá řešit tabulkou, pokud to není z nějakého důvodu na překážku.
Edit fiddle - JSFiddle

Zas tak triviální to není. Dej si třeba místo "Třetí" "Třetí díl tabulky". Buňka zvyšuje řádek.

20. 12. 2014 12:19:38

https://webtrh.cz/diskuse/roztahnuti-divu-do-zbyle-sirky-stranky/#reply1070766

kybernaut.cz

(12 hodnocení)

20. 12. 2014 17:07:39

Napsal Kloban;1143395
Ahoj,
nemůžu přijít na řešení zdánlivě triviálního úkolu a do googlu asi neumím správně zadat dotaz toho co potřebuji.
Mám čtyři divy. Potřebuji aby 2. 3 a 4. měli šířku obsahu divu (to není problém) a první aby se doplnil do zbylé šířky co je na stránce.
V css jsem zkoušel ve třídě prvniDiv nastavovat nějak vlastnost width, ale vždy se mi podařilo leda to, že se první div roztáhl na 100% šířky stránky a zbylé divy se zařadili pod něj. Potřebuji aby se ale roztáhl jen do zbytku šířky a divy zůstaly dál vedle něj.
<style> .mujDiv{ border:solid black 1px; float:left; } .prvniDiv{ }</style><div class="mujDiv prvniDiv">první</div><div class="mujDiv">druhý</div><div class="mujDiv">třetí</div><div class="mujDiv">čtvrtý</div>
Díky za rady.

Není třeba používat žádné tabulky nebo pod.

Myslím, že vaším cílem je využít "width: calc (100vh - 300px)" při šíři ostatních 100px.

Viz zde: http://jsfiddle.net/kybernaut/v5b7xswc/

20. 12. 2014 17:07:39

https://webtrh.cz/diskuse/roztahnuti-divu-do-zbyle-sirky-stranky/#reply1070765

Jiří

(1 hodnocení)

20. 12. 2014 18:11:58

Napsal JKHouba;1151615
Zas tak triviální to není. Dej si třeba místo "Třetí" "Třetí díl tabulky". Buňka zvyšuje řádek.

Tak to záleží na tom co je v obsahu, dá se to vyřešit přes white-space: nowrap, ale to se těžko radí když nevím co je uvnitř... Na konkrétní příklad se to vždycky nějak vymyslí.

Edit fiddle - JSFiddle

20. 12. 2014 18:11:58

https://webtrh.cz/diskuse/roztahnuti-divu-do-zbyle-sirky-stranky/#reply1070764

JKHouba

(1 hodnocení)

21. 12. 2014 18:42:08

S nowrapem bych byl také opatrný, zase může roztahovat celou tabulku moc do šířky.

Jinak souhlas, nevíme, co, kdy a jak bude uvnitř a jak to má na stránce celé vypadat.

21. 12. 2014 18:42:08

https://webtrh.cz/diskuse/roztahnuti-divu-do-zbyle-sirky-stranky/#reply1070763

Petr

6. 1. 2015 07:13:15