Jak vytvořit blok, který zabere zbývající šířku rodiče

Šířka postranního panelu vlevo a vpravo je 300 pixelů a 250 pixelů. sidebar-left je vlevo, sidebar-right je vpravo, obsah je mezi nimi. Jak mohu zajistit, aby šířka obsahu zabírala veškerý zbývající prostor?

Stopa
9,634 4 4 35 zlaté odznaky 35 73 stříbrné odznaky 73 XNUMX bronzové odznaky
zeptal se 8. srpna 2014 v 14:49
nick777 nick777
1,032 8 8 33 zlatých odznaků 33 68 stříbrných odznaků 68 XNUMX bronzových odznaků
sdružení: stackoverflow.com/questions/1032914/…
6. prosince 2017 v 11:01
sdružení: stackoverflow.com/questions/4873832/…
6. prosince 2017 v 11:05

2 odpovědi 2

Řadit: Obnovit výchozí

Moderní způsob. Flexbox

.kontejner < zobrazení: flex; >.sidebar-left < flex: 0 0 300px; >.sidebar-right

  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 

Moderní způsob. Mřížka

.kontejner

  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 

Aby to fungovalo také v IE, používáme starou syntaxi a explicitně nastavujeme pozici každého prvku:

.container < zobrazení: -ms-grid; display:grid; -ms-grid-columns: 300px 1fr 250px; grid-template-columns: 300px 1fr 250px; >.content < -ms-grid-column: 2; >.sidebar-left

  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 

Klasický. plovák a přepad: skrytý .

.clearfix:after < content: ""; displej: tabulka; jasné: obojí; >.obsah < přetečení: skryté; >.sidebar-left < float: left; šířka: 300px; >.sidebar-right

  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 

Proč přetékat: skrytá díla se dočtete v článku o Habrém.

Jak vytvořit blok, který zabere zbývající šířku rodiče

Dobré odpoledne, pánové. Lámu si hlavu nad dalším úkolem rozvržení (vypadá to, že je to nesmysl, ale nemůžu najít řešení). Existuje rodič s neznámou šířkou. Musíte do něj vejít tři bloky na řádek, dva bloky mají známou pevnou šířku, třetí by měl zabírat celou šířku „zbývající“ v nadřazeném kontejneru, ale protože šířka nadřazeného kontejneru není známa, šířka třetího bloku nelze určit absolutně ani relativně. Podmínky: třetí blok se musí vejít do stávající šířky rodiče a nesmí ho násilně roztahovat; nelze použít JS; výsledek by měl být kompatibilní s různými prohlížeči (včetně IE6, sakra); Upřednostňuje se minimální kód. Jak problém vyřešit? Momentálně mám toto:

Pomocí této metody se třetí blok přesune dolů do „druhé řady“.

• Zjednodušený způsob, jak nastavit zachycování událostí Google Analytics ve Správci značek Google
• Jak udělat web optimalizovaný pro mobily. Doporučení Platona Shchukina
• Vedení Yandex.Zen sdělilo zaměstnancům důvody prodeje platformy

Na webu od 20.04.2006
Offline
6. října 2011, 19:22

NerZool, umístěte bloky 1 a 2 do bloku 3.

Na webu od 30.01.2005
Offline
6. října 2011, 19:23

Můžete to tedy zkusit.

Stavební kalkulačky (https://www.zhitov.com/)
Na webu od 21.07.2010
Offline
6. října 2011, 19:23
Portfolio /ru/forum/526650 (/ru/forum/526650)
Na webu od 09.12.2005
Offline
6. října 2011, 19:36

NerZool:

Zde není potřeba nastavovat šířku, jen zabere zbývající místo.

Návrh interiéru (http://balabukha.com/)
[Smazáno]
6. října 2011, 20:41
NerZool, umístěte bloky 1 a 2 do bloku 3.

Díky moc. V aktuálním příkladu to fungovalo. Doufám, že teď dokážu přijít na skutečný problém))

podívej se sem))
http://www.cssplay.co.uk/layouts/fle. -fix-flex.html

V mém „puzzle“ není přístup k nadřazenému kontejneru, ale je registrován bez id a třídy, tzn. přetečení tomu nelze přičítat. Ale také díky, v budoucnu se to bude hodit.

Žitov, dkameleone, už jsem to zkusil, pánové. Nefunguje.