| Autor | Zpráva | ||
|---|---|---|---|
| esotery Profil |
#1 · Zasláno: 27. 8. 2010, 22:34:11
Dobrý den,
Mám problém s width u blokového elementu, který by měl mít width podlé svého contentu (jelikož má float: left nebo display: inline[viz. IE7 bug s inline-block] nebo position: absolute), ale má 100% šířku svého parenta. Děje se to jen tehdy, pokud sou v onom blokovém elementu floaticí elementy, jeden s float: left a druhý s float: right. Nevíte někdo co s tím? Přikládám obrázek: Problém |
||
| mckay Profil |
#2 · Zasláno: 27. 8. 2010, 23:42:24
esotery:
Těžké si to představit, nechce se ti hodit odkaz na živou ukázku? |
||
| esotery Profil |
#3 · Zasláno: 27. 8. 2010, 23:54:38
[#2] mckay Díky za odpověď. Právě proto jsem nakreslil ten obrázek, který by ti měl pomoci si to představit:).
|
||
| tiso Profil |
#4 · Zasláno: 28. 8. 2010, 00:06:31
esotery: neviem ako ty, ale až takú predstavivosť nemám, aby som si z obrázku predstavil tvoje html+css, viem si predstaviť iba to, ako by som to robil ja. Ale písať to a skúšať či by to podľa toho i fungovalo - to má od predstáv ešte ďaleko.
|
||
| Miloš Profil |
#5 · Zasláno: 28. 8. 2010, 00:23:03
Zkusil jsem to nasimulovat a nevidím problém:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {background-color: black;}
#hlavni_obal {width: 900px; background-color: white; color: black;}
#levy_blok {width: 430px; background-color: #fe0000; border: 10px dashed aqua; float: left;}
#levy_blok p {width: 150px; border: 3px groove lime; padding: 15px; background-color: yellow; color: navy;}
p {background-color: navy; color: yellow;}
#levy_float {float: left;}
#pravy_float {float: right;}
hr {visibility: hidden; clear: both}
</style>
<title>float</title>
<div id="hlavni_obal">
<div id="levy_blok">
<p id="levy_float">Lákamí vůněhulás úmyval rohlivý jednovod lek ta úmyvalem ční Tanechřeh slušiv.
Dráček škověný dechyňský magne bájen čeprad zenžto pokemi přiroje obzor ne.
<p id="pravy_float">Přehliv Bický uměsí čuva bubený tavětraje kamítkoli umyva rozcuce prozzásko zenžto.
Spouzavěď oba večníky radložný ne hulákaj poda Lžičkamí rojskočár zako Nesmetít.
Obý dobývá rozem k ří Holehlíně lžičkočaj dechyňsko řícit ne jítkem. Lva čuvadi hal říc ne hodlo.
</div>
<p class="mimo">Nějaký blok vpravo
<hr>
</div> |
||
| esotery Profil |
#6 · Zasláno: 28. 8. 2010, 00:28:50
[#4] tiso OK. Nastíním teda html a css.
<div class="container">
<div class="affectedElement">
<div class="leftFloat"></div>
<div class="rightFloat"></div>
</div>
<div/>
.container {
width: 900px;
}
.affectedElement {
overflow: hidden; /*rusi float, aby se nezbortil*/
float: left;
}
.leftFloat {
width: 10px;
height: 10px;
float: left;
}
.rightFloat {
width: 10px;
height: 10px;
float: right;
}
V každém slušném prohlížeči by měl mít .affectedElement šířku 20px. V IE7 má šířku .container(u), tedy 900px. |
||
| Miloš Profil |
#7 · Zasláno: 28. 8. 2010, 00:31:39
Nastav pro .affectedElement šířku.
|
||
| esotery Profil |
#8 · Zasláno: 28. 8. 2010, 00:36:54
[#7] Miloš To je jediný možný fix? Já potřebuji, aby se .affectedElement roztahoval podle obsahu.
|
||
| Miloš Profil |
#9 · Zasláno: 28. 8. 2010, 00:43:17 · Upravil/a: Miloš
Mám obavu, že ne, aneb Jak funguje "float" a "clear":
„Rozměry plovoucích prvků …Trošku složitější je to pouze se šířkou plovoucího prvku. U tzv. nahrazovaných prvků (např. u obrázků) problém není, ty mají svou šířku určenu implicitně. Ale u prvků ostatních může nastat problém. Pravidla pro jejich formátování se totiž během času několikrát změnila — nejprve (v CSS 2.0) platilo, že float musí mít šířku určenu, nyní (ve finální verzi CSS 2.1) už je doporučen algoritmus pro její automatický výpočet (Shrink-To-Fit). Ten by měl fungovat podobně jako u tabulek (hledá se optimální hodnota mezi minimální a maximální dostupnou šířkou) — ale ve stávajících prohlížečích tento postup ještě není spolehlivě implementován a specifikace CSS ani přesný postup nedefinuje. Nejčastější implementací je, že automatická šířka se použije u plovoucích prvků, které mají display:inline; zatímco u prvků s display:block musí být šířka explicitně určena, jinak si plaváček zabere celou dostupnou šířku (a nezbude tak místo, aby byl obtékán). Spolehnutí se na tento způsob implemantace se v současné době ukazuje jako zatím nejspolehlivější (auto-šířka u inline prvků, explicitně určená šířka u bloků).“ |
||
| esotery Profil |
#10 · Zasláno: 28. 8. 2010, 00:46:07
[#9] Miloš Děkuju mnohokrát, tak mi teda nezbyde nic jinýho, než to udělat s absolutní šířkou:/.
|
||
| Miloš Profil |
#11 · Zasláno: 28. 8. 2010, 00:48:01
Možná ještě někoho něco napadne; je to ale mimo moji momentální představivost.
|
||
| esotery Profil |
#12 · Zasláno: 28. 8. 2010, 00:58:43
[#11] Miloš Ještě mě napadlo změnit .affectedElement z divu na span (který je nativně inline), to sice s sebou přináší jisté nevýhody(kvůli validitě) a prasí to sémantiku, ale na to nikdo nekouká, každý chce perfektní vzhled:).
|
||
| Miloš Profil |
#13 · Zasláno: 28. 8. 2010, 01:02:58
Zkus místo toho divu .affectedElement nastavit v CSS display:inline – protože je to plaváček, nestane se z něj inline, ale Explorer by to mohlo ošálit.
|
||
| esotery Profil |
#14 · Zasláno: 28. 8. 2010, 01:05:55
[#13] Miloš To mám, bohužel to nefunguje:/.
|
||
| esotery Profil |
#15 · Zasláno: 28. 8. 2010, 01:12:28
|
||
|
Časová prodleva: 14 let
|
|||
0