Jak vyřešit umístění prvků: Float nebo Table?

Předmět	Autor	Datum
Pravdepodobne si chcel tabuľku priraziť hore, čo som si všimol neskôr. Tu je jednoduché riešenie, kt… msx. 12.10.2011 00:44	msx.	12.10.2011 00:44
Ahoj, díky za rychlou odpověď :-) ,inspiroval tebou a internetem a tady je výsledek. Použiju 4. přík… poslední dzutango 12.10.2011 22:12	dzutango	12.10.2011 22:12

Pravdepodobne si chcel tabuľku priraziť hore, čo som si všimol neskôr. Tu je jednoduché riešenie, ktoré si bude vyžadovať ešte úpravy, ale použiteľné to je:

<div style="width: 500px;">
  <div style="float: left; width: 100px; height: 100px; border: 1px solid black;">
    Tu je obrazok
  </div>
  <span>Text o iPod nano</span>
  <div style="float: right;">
    <div style="text-align: right;">
      Vypredaj
    </div>
    <button style="float: right;">
      tlacitko
    </button>
    <br style="clear: both;" />
    <div style="width: 200px; border: 1px solid black;">
      tu je ta tabulka    
    </div>
  </div>
  <br style="clear: both;" />
</div>

Ahoj, díky za rychlou odpověď ,inspiroval tebou a internetem a tady je výsledek. Použiju 4. příklad , ikdyž je tam použito tabulky. Je nutná, protože chci tu spodní tabulku vložit na pevné místo bez ohledu na výšku právého sloupce (cena, vložit do košíku, jen přes net) , jelikož se bude často měnit (viz obr). Uvědomil jsem si to až dnes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  
<p>1.</p>
<!-- PRvni navrch -->  
  <div style="width: 500px;">
  <div style="float: left; width: 130px; height: 130px; border: 1px solid black;">
    <img src="cs-default-home.jpg" >
  </div>  
  <span>Text o i fg . ...jkdgkdf gk d ddddd gfff fffff fffff f fdd dd ddd  f..  ...   ......</span>  <!--ZALAMOVANI nefunguje bez mezer mezi slovy , zalamuje se az o okraj 1. divu!-->
  <div style="float: right;">
    <div style="text-align: right;">
      Vypredaj
    </div>
    <div style="text-align: right;">
      Jen online
    </div>
    <button style="float: right;">
      tlacitko
    </button>
    <br style="clear: both;" /> 
    <div style="width: 200px; border: 1px solid black;">
      tu je ta tabulka    
    </div>
  </div>
  <br style="clear: both;" />
</div>


<p></p>
 <br><br><br><br>
 
<p>2.</p>
<!--Muje uprava s Float-->
<div style="width: 500px;">
  
  <div style="float: left; width: 130px; height: 130px; border: 3px solid black;">
    <img src="cs-default-home.jpg" >
  </div>
  
  <div style="float: left; width: 270px; ">Text o i fg .hggk d dd ddd gfff fffffff ffff fdddd ddd...   ...... llskf   dfs jak kde kam kdy </div><!-- zalamuje se celkem spravne-->
  
  <div style="float: right; width: 80px; text-align: right;">
  
      Vypredaj<br> <!--nebýt tohoto řádku, nebo krátkého textu  tak je zobrazení správné-->
      Jen přes net
    <button >
      tlacitko
    </button>
  </div>
   <br><br>
  <div style="width: 200px; border: 1px solid black; float: right;">
      tu je ta tabulka    
    </div>
    <br style="clear: both;" />  <!-- tak tady nevim jak se uplatni-->
    
</div>
 <p>MOI</p>


 <br><br><br><br>



 <!--3. Muje uprava s Float, všude LEFT !! a vypadá to dobře-->
<p>3.</p> 
<div style="width: 500px;"><!--Pokud pvni tři elementy nenaplni šířku bude tabulka opticky vyčnívat z uspořádání, pokud ji přesáhnou,uspořádání se zhroutí (bacha na šířku rámečků )--> 
  
  <div style="float: left; width: 130px; height: 130px; border: 3px solid black;">
    <img src="cs-default-home.jpg" >
  </div>
  
  <div style="float: left; width: 283px; ">Text o i fg .hggk d dd ddd gfff fffffff ffff fdddd ddd...   ...... llskf   dfs jak kde kam kdy </div><!-- zalamuje se  spravne-->
  
  <div style="float: left; width: 80px; text-align: right;">
  
      Vypredaj<br> 
      Jen přes net
    <button >
      tlacitko
    </button>
  </div>
   <br><br>
  <div style="width: 200px; border: 1px solid black; float: right;">
      tu je ta tabulka    
    </div>
    <br style="clear: both;" />  <!-- tak tady nevim jak se uplatni-->
    
</div>
 <p>MOI</p>

 <br><br><br><br>





<!-- 4. Muje uprava s table-->
<p>4.</p> 
<div style="width: 500px; border: 1px solid red;">
  <div style="float: left; width: 130px; height: 130px; border: 1px solid black;">
    <img src="cs-default-home.jpg" >
  </div>  
  
  <div style="float: left; width: 285px; ">Text o i fg .hggk d dd ddd gfff fffffff ffff fdddd ddd...   ...... llskf   dfs jak kde kam kdy </div><!-- zalamuje se  spravne--> 
  
  
  
   <table style="text-align: right; float: left; width: 80px; height: 105"><tr><td> <!-- původně div--> 
      Vypredaj<br> <!--nebýt tohoto řádku, nebo krátkého textu  tak je zobrazení správné-->
      Jen přes net
    <button >
      tlacitko
    </button>
    
  </td></tr></table>  

    
  <div style="width: 200px; border: 1px solid black; float: right; margin: 3px;">
      tu je ta tabulka    
  </div>
  
  
  <br style="clear: both;" />
  
</div>

 <br><br><br><br>



  </body>
</html>

float-nebo-table.jpg 34.07 KiB