将对象置于 2 个浮动对象下方

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>

将对象置于 2 个浮动对象下方

Centering object below 2 floating ones

html

css

center