强制div溢出？

Question

我的div大小是黑色边框，我希望我的图标溢出到右侧的灰色区域，所以twitter图标位于中心。他们都应该在同一条线上。

我目前使用这样的：

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

谢谢！

Screenshot

Answer 1

艾丽西亚。 我敢打赌，你想要做这样的事情

.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>

我建议ü阅读更多关于CSS溢出和定位。 我会推荐W3Schools开始。

• 溢出解释here
• 定位元素here