Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

CSS Изображения и елементи

С помощта на свойството float даден елемент може да бъде поставен в крайно ляво или дясно положение заобиколен от елементите, които го следват. В долния пример с клас span се увеличава първата буква на абзаците и се изнася в ляво. С клас img.right изображението се придвижва плътно в дясно и се огражда с червена рамка с дебелина 1 px, отстояние от рамката 5 px и отстояние от текста 5 px. Ако се вмъкнат няколко елемента те ще следват един след друг доколкото позволява местото. В долният пример е създадена галерия с помощта на клас .thumbnail, в който са зададени съответните стойности на свойствата float, border, width, height и margin. За да се прекъсне тази редица се използва свойството clear със стойност both, което е включено в клас .new_row. Този клас е използван при вкарване на празен абзац <p class="new_row"></p> за да се разделят двата реда с изображенията на галерията (виж примера в браузъра): 


<!DOCTYPE html>
  <head>
	<style type="text/css">
	  p{text-align:justify;}
	  span {
		float:left;
		width:0.7em; 
        font-size:300%; 
        line-height:80%;
	  }
	  img.right {
		float:right;
		border:1px solid red;  
		padding:5px;     
		margin:5px;
	  }
	  .thumbnail {
		float:left; 
		border:1px solid DarkBlue;
		width:100px;     
		height:80px;     
		margin:5px;
	  }
	  .new_row {clear:both;} 
	</style>
  </head>
  <body>
	<p> <span>L</span>orem ipsum dolor sit amet …</p>
	<p><img class= "right" src="/subsidiary/rose.png" width="170" height="202" /> 
	<span>P</span>hasellus tristique accumsan euismod …</p>
	<h3>Галерия</h3>
	<img class="thumbnail" src="/photo01m.jpg">
	<img class="thumbnail" src="/photo02m.jpg">
	<img class="thumbnail" src="/photo03m.jpg">
	<img class="thumbnail" src="/photo04m.jpg">
	<p class="new_row"></p>
	<img class="thumbnail" src="/photo05m.jpg">
	<img class="thumbnail" src="/photo06m.jpg">
	<img class="thumbnail" src="/photo07m.jpg">
	<img class="thumbnail" src="/photo08m.jpg">
  </body>
</html>