Ca sa aliniati mai multe tag-uri <div> pe aceeasi linie in plan orizontal, puteti folosi aceste doua proprietati CSS: display: inline-block;
, sau float
(cu valoarea "left", sau "right").
- Pentru un design responsiv, ca elementele <div> sa ramana aliniate si ajustate la lungimea ferestrei browser-ului, folositi valori in procente (%) la lungimea DIV-urilor si margini.
In urmatorul exemplu, elementele HTML <div> au proprietatea CSS: display: inline-block;
<!DOCTYPE html> <html> <head> <title>Titlul</title> <style> #left, #center, #right { position: relative; display: inline-block; margin: 1em 0.1em 0.1em 0.8%; padding: 0.1em; background: #ebebfb; border: 2px solid blue; } #left { width: 22%; height: 11em; } #center { width: 52%; height: 14em; } #right { width: 16.2%; height: 11em; } </style> </head> <body> <div id="left"> <div> <a href="https://coursesweb.net/" title="Web Courses">CoursesWeb.net</a><br/> <a href="https://marplo.net/" title="MarPlo.net">MarPlo.net</a><br/> <a href="https://gamv.eu/" title="Flash Games">Flash Games</a><br/> </div> </div> <div id="center"> <p>Content in the center Div.<br/> HTML Course and Tutorials - Align DIVs</p> </div> <div id="right"> Content in the Div from right side. </div> </body> </html>
Daca folositi proprietatea CSS float
, adaugati un element HTML cu proprietatea "clear: both;
" dupa ultimul DIV care are aplicat "float"; astfel aceasta nu va afecta celelalte elemente din pagina care sunt dupa DIV-urile aliniate.
<!DOCTYPE html> <html> <head> <title>Titlul</title> <style> #left, #center, #right { position: relative; float: left; margin: 1em 0.1em 0.1em 0.8%; padding: 0.1em; background: #ebebfb; border: 2px solid blue; } #left { width: 22%; height: 11em; } #center { width: 52%; height: 14em; } #right { width: 16.2%; height: 11em; } .clr { clear: both; } /* to anulate the effect of the float */ #footer { position:relative; width: 99%; height: 5em; margin: 1em auto 0.2em auto; background: #befbbe; } </style> </head> <body> <div id="left"> <div> <a href="https://coursesweb.net/" title="Web Courses">CoursesWeb.net</a><br/> <a href="https://marplo.net/" title="MarPlo.net">MarPlo.net</a><br/> <a href="https://gamv.eu/" title="Flash Games">Flash Games</a><br/> </div> </div> <div id="center"> <p>Content in the center Div.<br/> HTML Course and Tutorials - Align DIVs using float:left;</p> </div> <div id="right"> Content in the right side Div. </div> <br class="clr" /> <div id="footer"> Div under the DIVs aligned with "float: left", after the tag with "clear: both;". </div> </body> </html>
Continut ... <hr /> Alt continut sub linie ...
h2 { color: #cbdafb; }
var str = "Web courses - http://CoursesWeb.net/"; if(str.indexOf("http://") == -1) alert("http:// nu e in sir"); else alert("http:// e in sir");
$str = "mar,banana,pepene,para"; $arr = explode(",", $str); var_export($arr); // array (0=>"mar", 1=>"banana", 2=>"pepene", 3=>"para")
July is a beautiful summer month. - Iulie este o frumoasa luna de vara.
Julio es un hermoso mes de verano. - Iulie este o frumoasa luna de vara.