1
Ich habe versucht, ein interessantes Element auf meiner Website zu machen. Ich habe versucht, 2 Kreise zu haben, die ihr Elternelement und 1 überlappend aber darunter überschneiden. Wie 2 überlappen sich oben und 1 überlappt sich unten.Zentrierendes Objekt unter 2 schwebenden
Ich versuchte Float links und float rechts, aber ich weiß nicht, wie man mit der 3 zu tun. Ich könnte 3 inline (in Beispiel) machen.
Kann jemand 2 inline und die dritte in der Mitte unter ihnen machen?
Ich hoffe, Sie werden mich verstehen ... es ist ziemlich schwer zu beschreiben.
#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>
ganz ja ... aber mit dem besonderen Merkmal, dass die 2 obere Kreise überlappen/überlaufen den oberen und die 3 in der Mitte werden die untere Kante des roten Se überlaufen ction .... So unter dem roten Abschnitt ist ein weiterer weißer Abschnitt (aber ich denke, es spielt keine Rolle) –
Ich habe meine Antwort aktualisiert, sehen, ob das verrechnet wird. –
das ist es ziemlich, ich schrieb es für meine ursprüngliche Verwendung um, und es funktionierte, aber ich konnte die Abstände zwischen ihnen nicht minimieren .... Ich brauche Leerzeichen wie 50px oder so ähnlich (klein/mittel). Also welches CSS-Element macht es so breit? –