CSS floats
In last lesson we considered html block layout. I remind, div tag has got two main characteristics – width and height by default.
Bu the question is, how to make several divs in row. For this purpose CSS has got a rule – float. This rule can accept three values – left, right and none.
Through float we can set divs in row from left to right. But with float divs sticks to one another. To remove this effect CSS has got clear rule. This rule has got three rules – left, right and both.
Video and code lesson are below.
Bu the question is, how to make several divs in row. For this purpose CSS has got a rule – float. This rule can accept three values – left, right and none.
Through float we can set divs in row from left to right. But with float divs sticks to one another. To remove this effect CSS has got clear rule. This rule has got three rules – left, right and both.
Video and code lesson are below.
Code lesson (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>float</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="one">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni ut possimus quas nemo aliquam tempora ratione debitis, laudantium quis, id, nihil ex earum libero minus et eos excepturi hic reprehenderit!</p>
</div>
<div class="two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni ut possimus quas nemo aliquam tempora ratione debitis, laudantium quis, id, nihil ex earum libero minus et eos excepturi hic reprehenderit!</p>
</div>
<div class="three">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni ut possimus quas nemo aliquam tempora ratione debitis, laudantium quis, id, nihil ex earum libero minus et eos excepturi hic reprehenderit!</p>
</div>
<div class="four">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ab asperiores et similique totam. Consectetur necessitatibus quas, tenetur quasi iusto nam id quia animi nemo itaque dignissimos ratione, obcaecati repudiandae!</p>
</div>
</body>
</html>
Пример 2 - обтекание картинки текстом
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<img src="https://placekitten.com/g/250/200" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quas explicabo consequatur beatae in nostrum illum ad, velit accusamus odit facilis magnam, suscipit delectus earum maiores vel odio molestiae, tempore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam accusamus temporibus eligendi, commodi sapiente? Numquam non repellendus ullam sed doloribus optio corporis ipsam iste reprehenderit aperiam consectetur, reiciendis velit neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus reiciendis, maiores fugit exercitationem nihil, quo odit, voluptatibus quidem nesciunt beatae inventore consequuntur officiis iusto ipsa, dolore praesentium deserunt optio ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis repellat dolores veritatis assumenda optio id odit neque cupiditate velit unde tempore quidem minus provident, saepe cumque similique sit. Sapiente, excepturi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quas explicabo consequatur beatae in nostrum illum ad, velit accusamus odit facilis magnam, suscipit delectus earum maiores vel odio molestiae, tempore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam accusamus temporibus eligendi, commodi sapiente? Numquam non repellendus ullam sed doloribus optio corporis ipsam iste reprehenderit aperiam consectetur, reiciendis velit neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus reiciendis, maiores fugit exercitationem nihil, quo odit, voluptatibus quidem nesciunt beatae inventore consequuntur officiis iusto ipsa, dolore praesentium deserunt optio ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis repellat dolores veritatis assumenda optio id odit neque cupiditate velit unde tempore quidem minus provident, saepe cumque similique sit. Sapiente, excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum eveniet ipsa ipsam, quia eaque vitae est voluptas non tempora? Debitis nobis ipsum, consequuntur omnis officiis doloremque et a ex, esse.</p>
</div>
</body>
</html>Code lesson (CSS)
.one, .two, .three {
float: left;
color: #fff;
width: 33%;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
.four {
background-color: #e1e1e1;
clear: both;
}
img {
float: left;
margin-right: 10px;
}
0 Comments