<html>
<head>
<meta charset="utf-8" />
<title>БД</title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body style="background-color:#095749;">
<br><div class="A">
<div id="a" class="component"><p>12.11.1967</p></div>
<div id="aa" class="component"><p>Льоня</p></div>
</div>
<br><div class="B">
<div id="b" class="component"><p>04.03.1967</p></div>
<div id="bb" class="component"><p>Настя</p></div>
</div>
<br><div class="C">
<div id="c" class="component"><p>28.04.2019</p></div>
<div id="cc" class="component"><p>Макс</p></div>
</div>
<br><div class="D">
<div id="d" class="component"><p>11.02.1926</p></div>
<div id="dd" class="component"><p>Витя</p></div>
</div>
<br><div class="E">
<div id="e" class="component"><p>02.04.1960</p></div>
<div id="ee" class="component"><p>Даша</p></div>
</div>
</body>
</html>
p {
text-align: center;
}
.A, .B, .C, .D, .E {
display: inline-block; /* Делаем компоненты A, B, C, D, E инлайн-блоками */
vertical-align: top; /* Выравниваем их по верхнему краю */
margin-left: 20px; /* Добавляем отступ слева */
}
#a, #aa, #b, #bb, #c, #cc, #d, #dd, #e, #ee {
display: inline-block; /* Делаем элементы внутри блоков инлайн-блоками */
}
#a, #b, #c, #d, #e {
width: 80px;
border: 2px solid black;
margin: 3px;
background-color: yellow;
}
#aa, #bb, #cc, #dd, #ee {
width: 350px;
background-color: blue;
border: 2px solid black;
}
