Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailem CSS rozvržení - problém s Float

Zdarec, mám problém s CSS konkrétně s vlastností float. Chci vytvořit 2 sloupce obrázků, budou různě vysoké a naukládané v divech s třídou. Nejednoduší je to napráskat do tabulky. Ale já bych potřeboval aby se to "srovnávalo" tj. sloupce budou přibližně stejně vysoké.

Už jsem to zkoušel nedopadlo to nejlíp.
Kod:

<div id="obsah">
<div class="obr"><img src="atd...></div>
....

</div>
[b]styl:[/b]

<style>
#obsah{
background-color:yellow;
width:500px;
height:auto;
}
.obr{
width:47%;
clear:right;
float:left;
margin:2px;
</style>

Přibližný nákres:
špatně (mezery mezi obrázky) :

 IIIIIIII IIIIIIIII
          IIIIIIIII
  
          IIIIIIIII
  
 IIIIIIII IIIIIIIII

Mělo by to vypadat jako jeden celý obrázek akorát s 4px mezerami, pátrám po tom celou dobu doufám že mě pochopíte, Díky :-)

Předmět Autor Datum
Ak som správne pochopil, dva obrázky sú širšie a teda vznikne napravo medzera, nie?
msx. 13.07.2010 16:05
msx.
Skoro, mezera tam vznikne ale kvůli výšce obrázku.
Anison 13.07.2010 16:11
Anison
Počuj, aj tak si to neviem predstaviť, skús hodiť screenshot a zdroják. A asi je tu jedna možnosť e…
msx. 13.07.2010 17:52
msx.
Takže to čo som si myslel bolo niečo iné.
msx. 13.07.2010 18:03
msx.
Dávaj po každom druhom obrázku clear: both, čiže: <br style="clear: both;" /> Predpokladám, že ti…
msx. 13.07.2010 18:05
msx.
Takhle jsem to namaloval: [img]beznzvuv.png[/img] červené je jak se to chová s float, zelené jak by…
Anison 14.07.2010 11:52
Anison
Ahoj, hoď to do dvou obalových divů. <div id="obsah"> <div id="left"> <div class="obr">...</div> ..…
hvězd 14.07.2010 20:19
hvězd
Takto? float-obr <style type="text/css"> .cely { width: 370px; margin: auto } .levy { width:185px;… poslední
Kráťa 14.07.2010 22:48
Kráťa

Ahoj,
hoď to do dvou obalových divů.

<div id="obsah">
  <div id="left">
    <div class="obr">...</div>
    ...
    ...
  </div>

  <div id="right">
    <div class="obr">...</div>
    ...
    ...
  </div>
</div

S tím, že tomu levému dáš float: left;
V případě nutnosti tomu pravému dej float: right; a nastav absolutní velikost nadřazenému divu, aby to nelétalo všude možně :)

Doufám, že jsem to správně pochopil :)

EDIT:
Nač je v tříde obr ten width?

Takto?

float-obr

<style type="text/css">
  .cely {
  width: 370px;
  margin: auto
  }
  
  .levy {
  width:185px;
  float: left
  }
  
  .pravy {
  width:185px;
  float: right
  }
  
  </style>
  </head>
  <body>
<div class="cely">  
  
<div class="levy">
<img src="images/zeleny-nizky.gif" height="56" width="185"><br>
<img src="images/zeleny-vysoky.gif" height="81" width="185"><br>
<img src="images/zeleny-nizky.gif" height="56" width="185"><br>
<img src="images/zeleny-nizky.gif" height="56" width="185"><br>
<img src="images/zeleny-vysoky.gif" height="81" width="185"><br>
<img src="images/zeleny-vysoky.gif" height="81" width="185"><br>
<img src="images/zeleny-nizky.gif" height="56" width="185"><br>
</div>

<div class="pravy">
<img src="images/zeleny-vysoky.gif" height="81" width="185"><br>
<img src="images/zeleny-vysoky.gif" height="81" width="185"><br>
<img src="images/zeleny-nizky.gif" height="56" width="185"><br>
<img src="images/zeleny-nizky.gif" height="56" width="185"><br>
<img src="images/zeleny-nizky.gif" height="56" width="185"><br>
<img src="images/zeleny-vysoky.gif" height="81" width="185"><br>
<img src="images/zeleny-nizky.gif" height="56" width="185"><br>
</div>

</div>

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