Forcing div zum Überlauf?

Question

Meine div-Größe ist der schwarze Rand, und ich möchte, dass meine Symbole in den grauen Bereich auf der rechten Seite übergehen, so dass das Twitter-Symbol im Mittelpunkt steht. Sie sollten alle auf derselben Linie sein.

Ich bin derzeit dies mit:

<div class="social-icon-medium" style="max-width: 500%; padding-left: 50% !important; display: inline-block !important;"> 

Vielen Dank!

Screenshot

Answer 1

Alicia. Ich wette, dass Sie so etwas wie dieses

.container { 
 
    height: 200px; 
 
    background: light-grey; 
 
} 
 
.white-area { 
 
    background: white; 
 
    overflow: visible; 
 
    border: 1px solid #333; 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 50%; 
 
    height: 70px; 
 
} 
 

 
.icons-wrapper { 
 
    position: absolute; 
 
    transform: translate(-50%, 0); 
 
    right: -100%; 
 
} 
 

 
img { 
 
    height: 50px 
 
} 
 

 

<div class="container"> 
 
    <div class="white-area"> 
 
     <div class="icons-wrapper"> 
 
      <img src="https://image.flaticon.com/icons/svg/174/174848.svg" alt="Facebook free icon" title="Facebook free icon"> 
 
      <img src="https://image.flaticon.com/icons/svg/174/174876.svg" alt="Twitter free icon" title="Twitter free icon"> 
 
      <img src="https://image.flaticon.com/icons/png/512/174/174883.png" alt="Youtube free icon" "=""> 
 
     </div> 
 
    </div> 
 
    </div>

Ich schlage vor, tun wollen u mehr über Überlauf und Positionierung in CSS zu lesen. Ich würde W3Schools für den Anfang empfehlen.

• Überlauf erklärt here
• Positionierung von Elementen here