Dwa divy w jednej linii: Różnice pomiędzy wersjami

Z Podręcznik Administratora by OPZ SGU
Przejdź do nawigacji Przejdź do wyszukiwania
m
m (Zastępowanie tekstu - "<source lang="css">" na "<pre>")
 
(Nie pokazano 3 wersji utworzonych przez 2 użytkowników)
Linia 3: Linia 3:


Część CSS
Część CSS
<source lang="css">
<pre>
<style>
<style>
#do_lewej { float: left;}  
.do_lewej { float: left;}  
#do_prawej { float: right;}  
.do_prawej { float: right;}  


.kontener
.kontener
Linia 13: Linia 13:
}
}
  </style>
  </style>
</source>
</pre>


część HTML
część HTML


<source lang="html4strict">
<pre>
<div class="kontener">  
<div class="kontener">  
  <div id="do_lewej">To bedzie po lewej :)</div>  
  <div class="do_lewej">To bedzie po lewej :)</div>  
  <div id="do_prawej">To bedzie po prawej :)</div>  
  <div class="do_prawej">To bedzie po prawej :)</div>  
  <div style="clear:both;"></div>  
  <div style="clear:both;"></div>  
</div>
</div>
</source>
</pre>


[[Plik:Efekt divy w jednej lini.png|200px|thumb|right|Efekt finalny]]
[[Plik:Efekt divy w jednej lini.png|200px|thumb|right|Efekt finalny]]
[[Category:HTML]]
[[Category:HTML]]

Aktualna wersja na dzień 14:35, 18 lut 2018

Aby umieścić dwa DIV-y obok siebie stosujemy poniższy kod.


Część CSS

<style>
.do_lewej { float: left;} 
.do_prawej { float: right;} 

.kontener
{
border:solid 1px black;
}
 </style>

część HTML

<div class="kontener"> 
 <div class="do_lewej">To bedzie po lewej :)</div> 
 <div class="do_prawej">To bedzie po prawej :)</div> 
 <div style="clear:both;"></div> 
</div>
Efekt finalny