html - 将对象置于 2 个 float 对象下方

Question

我试图在我的网站上制作一个有趣的元素。我试图让 2 个圆圈重叠它们的父元素和 1 个重叠但在下方。就像 2 个在上面重叠，1 个在下面重叠。

我试过向左浮动和向右浮动，但我不知道如何处理第 3 个。我可以制作 3 个内联(例如)。

有谁知道如何使 2 个内联和第 3 个位于它们下方的中心？

我希望你能理解我……这很难描述。

#bile{
  background: white;
  width: 100%;
  height: 150px;
}
.kolecko{
position: absolute;
	top: -10%;
	display: table;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: gray;
	border: 1px solid black;
	box-shadow: inset 0 0 20px #000;
}
.kolecko:hover{
	box-shadow: inset 0 0 20px #fff;
}
.popisek{
vertical-align: middle;
text-align: center;
display: table-cell;
font-size: 15px;

}
.popisek:hover{
color: blue;
}

.obal{
	display: inline-flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
#rude{
	width: 100%;
	position: relative;
	height: 250px;
	background: #720000;
	padding: 0 15%;
}

.kolecka{
display: inline-block;
width: 100px;
margin-right: 10%;
}
.kolecka:last-child{
	margin-right: 0;
}

<section id="bile"></section>
<section id="rude">
	<div class="kolecka">
	<div class="obal">
			<div class="kolecko"> 
			<div class="popisek">WWW</div>
	</div>
	</div>
	</div>

	<div class="kolecka">
		<div class="obal">
			<div class="kolecko"> 
			<div class="popisek">abs</div>
	</div>
	</div>
	</div>
	
	<div class="kolecka">
		<div class="obal">
			<div class="kolecko" style="float: right;">
			<div class="popisek">123</div>
	</div>
	</div>
	</div>

</section>

Answer 1

这是你想要达到的效果吗，请看看

#bile{
  background: white;
  width: 100%;
  height: 150px;
}
.kolecko{
//position: absolute;
	top: -10%;
	display: table;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: gray;
	border: 1px solid black;
	box-shadow: inset 0 0 20px #000;
}
.kolecko:hover{
	box-shadow: inset 0 0 20px #fff;
}
.popisek{
vertical-align: middle;
text-align: center;
display: table-cell;
font-size: 15px;

}
.popisek:hover{
color: blue;
}

.obal{
	display: inline-flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
#rude{
	width: 100%;
	position: relative;
	height: 250px;
	background: #720000;
	padding: 0 15%;
}

.kolecka{
display: block;
width: 100px;
margin-right: 10%;
position: absolute;
bottom: 100%;
}
.kolecka:last-child{
	margin-right: 0;
    right: 0;
}
.kolecka:nth-child(2){
  margin: 0 auto;
  position: relative;
  top: 100%;
}

<section id="bile"></section>
<section id="rude">
	<div class="kolecka">
	<div class="obal">
			<div class="kolecko"> 
			<div class="popisek">WWW</div>
	</div>
	</div>
	</div>

	<div class="kolecka">
		<div class="obal">
			<div class="kolecko"> 
			<div class="popisek">abs</div>
	</div>
	</div>
	</div>
	
	<div class="kolecka">
		<div class="obal">
			<div class="kolecko" style="float: right;">
			<div class="popisek">123</div>
	</div>
	</div>
	</div>

</section>