当宽度比其容器宽时，是否有可能使DIV溢出？

问题描述：

我有一系列DIV包含在较大的DIV中。容器DIV高而窄，所以所有的孩子DIV都放置在一个垂直列中。当宽度比其容器宽时，是否有可能使DIV溢出？

所有子DIV的宽度都不相同，并且所有子div的保证金声明为margin: 0 auto 2em auto;，因此当子DIV不像容器那样宽时，它位于水平中心。但是，当小孩的DIV比容器DIV宽时，孩子的左边缘与容器的左边缘齐平，并且孩子的右边缘扩展超过容器的右边缘。

是否有可能改为使得当孩子比父DIV宽时，它会同时伸出容器的右边和左边，以使其视觉中心？

这是我目前的CSS：

.parent { 
    margin: 2em auto; 
    width:80%; 
    border: red thin solid; 
} 
.child { 
    border: green 3px solid; 
    display: table; 
    position: relative; 
    clear: both; 
    line-height:0; 
    margin: 0 auto 2em auto; 
}

听起来像Javascript将是最简单的解决方案，如果这是一个选项。只需循环每个内部元素并相应地定位它。如果你提供了一些你的代码，我可以帮助你更多。 – EvilZebra 2014-10-19 03:34:11

@Evilzebra，谢谢你的回应。我希望有一个纯粹的CSS解决方案，但将Javascript用作备份选项会很好。 – Questioner 2014-10-19 03:52:25

可能的重复：http://stackoverflow.com/questions/26428738/how-to-center-text-in-table-cell-when-it-overflow/26428969 – trnelson 2014-10-19 03:54:24

答

http://codepen.io/anon/pen/ItfAc

你可以用负保证金左手动或编程方式做到这一点。

该公式非常简单：您将子div溢出的数量减半，然后将结果设为负余量值。因此，如果您有一个宽度为140％的子div，则剩余空间为：-20％。

如果你想避免JS，这是很容易与无礼的事，例如：

@mixin width-overflow($width){ 
    width: percentage($width/100); 
@if ($width > 100) { 
    margin-left: -(percentage(($width - 100) * .005)); 
    } 
} 

.child-1 { 
    @include width-overflow(140); 
}

（中的* 0.005仅有/ 2/100 - 除以100的数量只是转换它回到一个百分比有点杂乱，但工程。我敢肯定有更多优雅的方式比这个。）

当宽度比其容器宽时，是否有可能使DIV溢出？

相关推荐