Вы здесь: Главная > CSS > Два плавающих поля

Два плавающих поля

Опубликовано автором Просмотры: 12

Проектирование двух плавающих полей на странице с помощью CSS.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Floating 2</title>
	<style>
		body {
			font: 80%/1.5 arial, helvetica, sans-serif;
		}
		
		code {
			font: bold 1em courier;
		}
		
		#second {
			width: 7em;
			float: left;
			
			color: white;
			background: #060;
			padding: 1em;
			margin: 0;
		}
		
		#fourth {
			width: 20em;
			float: right;
			
			color: white;
			background: #006;
			padding: 1em;
			margin: 0;
		}
	</style>
</head>
<body>
	<p>First paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	<p id="second">Second paragraph. Has the CSS<br><code>width: 7em; float: left</code><br>applied.</p>
	<p>Third paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	<p id="fourth">Fourth paragraph. Has the CSS<br><code>width: 20em; float: right</code><br>applied.</p>
	<p>Fifth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	<p>Sixth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	<p>Seventh paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</body>
</html>

Страницы в тему:

Добавить комментарий