當寬度比其容器寬時，是否有可能使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; 
}

來源

2014-10-19 Questioner

聽起來像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的數量只是轉換它回到一個百分比有點雜亂，但工程。我敢肯定有更多優雅的方式比這個。）

來源

2014-10-19 04:19:53 mknadler

當寬度比其容器寬時，是否有可能使DIV溢出？

回答

相關問題