1
私は自分のウェブサイトで興味深い要素を作ろうとしていました。私は2つの円がその親要素と重なり、1つが重なっているが下にあるようにしようとしていた。 2のように上が重なり、1が下に重なっている。2つの浮動小数点の下にオブジェクトをセンタリング
私はフロートを左に浮かべて右に浮いてみましたが、私は3つをどう扱うべきか分かりません。 3つのインラインを作成することができます（例）。
誰も2インラインを作り、第3のインラインをそれらの下に置く方法を知っていますか？
私はあなたが私を理解することを望む...それは記述するのがかなり難しいです。
#bile{
background: white;
width: 100%;
height: 150px;
}
.kolecko{
position: absolute;
\t top: -10%;
\t display: table;
\t width: 100px;
\t height: 100px;
\t border-radius: 50%;
\t background: gray;
\t border: 1px solid black;
\t box-shadow: inset 0 0 20px #000;
}
.kolecko:hover{
\t 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{
\t display: inline-flex;
\t justify-content: space-evenly;
\t flex-wrap: wrap;
}
#rude{
\t width: 100%;
\t position: relative;
\t height: 250px;
\t background: #720000;
\t padding: 0 15%;
}
.kolecka{
display: inline-block;
width: 100px;
margin-right: 10%;
}
.kolecka:last-child{
\t margin-right: 0;
}<section id="bile"></section>
<section id="rude">
\t <div class="kolecka">
\t <div class="obal">
\t \t \t <div class="kolecko">
\t \t \t <div class="popisek">WWW</div>
\t </div>
\t </div>
\t </div>
\t <div class="kolecka">
\t \t <div class="obal">
\t \t \t <div class="kolecko">
\t \t \t <div class="popisek">abs</div>
\t </div>
\t </div>
\t </div>
\t
\t <div class="kolecka">
\t \t <div class="obal">
\t \t \t <div class="kolecko" style="float: right;">
\t \t \t <div class="popisek">123</div>
\t </div>
\t </div>
\t </div>
</section>
かなりはい...しかし、その特別な機能であることを見てください。上の2つの円は上にオーバーフロー/オーバーフローし、中央の3つは赤の下端をオーバーフローしますction ....だから、赤い部分の下に別の白い部分があります（しかし、それは問題ではないと思います）。 –
私は自分の答えを更新しました。 –
それはかなりですが、私は元の用法のためにそれを書き返しました、そしてうまくいきましたが、私はそれらの間のスペースを最小限に抑えることができませんでした....私は50pxのようなスペースが必要です（小/中）。だからどのcss要素がそれをとても広くしていますか？ –