<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>float</title>
</head>
<body>
<style>
.gnocchi-parent {
border: 5px solid red;
}
.lasagna-parent {
border: 5px solid green;
}
/*Место для решения 1 способом*/
/*
.content{
position: relative;
}
.gnocchi-parent{
position: absolute;
}
.lasagna-parent{
position: absolute;
top: 423px;
}
Недостаток данного способа, необходимость самостоятельно задать высоту для одного из контейнера
*/
/*Место для решения 2 способом*/
/*
div{
display: table;
}
*/
/*Место для решения 3 способом*/
/*
*/
/*Место для решения 4 способом clear*/
img {
float: left;
max-width: 200px;
margin: 10px;
}
/*
.lasagna-parent{
clear: both;
}
div{
float: left;
}
*/
</style>
<h1>Ньокки и лазанья</h1>
<div class="content">
<div class="gnocchi-parent">
<img class="image" href= alt="ньокки">
<img class="image" src="img/gnocchi2.jpg" alt="ньокки">
<img class="image" src="img/gnocchi3.jpg" alt="ньокки">
</div>
<div class="lasagna-parent" >
<img class="image" src="img/las1.jpg" alt="лазанья">
<img class="image" src="img/las2.jpg" alt="лазанья">
<img class="image" src="img/las3.jpg" alt="лазанья">
</div>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.