- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<title>float и ширина</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="block block1">
.block1<br>
Короткий текст
</div>
<p>Float'нутый бокс перестает раздаваться на всю ширину родительского бокса-контейнера (как это происходит с блоками в потоке). С его неприжатой к родителю свободной стороны появляется свободное место.</p>
<div class="block block2">
.block2<br>
Более длинный текст, занимающий всю ширину страницы
</div>
<p>Следующие за ним блочные боксы подтягиваются вверх и занимают его место, как если бы float'нутого бокса в потоке не было. Строчные же боксы внутри подвинувшихся наверх блоков начинают обтекать float'нутый бокс со свободной стороны.</p>
</div>
</body>
</html>
CSS
.container {
width: 400px;
margin: 20px auto;
padding: 10px;
box-shadow: 0 0 2px #cccccc;
}
.block {
padding: 10px;
color: white;
background-color: #3498db;
border: 2px solid #34495e;
}
p {
background-color: #ecf0f1;
border: 2px dotted #bdc3c7;
}
ЗадачиВыполнено
- Для
.block1задайте флоат влево. - Для
.block2задайте флоат вправо. - Обоим блокам задайте ширину
100px.