最小寬度的動態變化

這是一段簡單的代碼，導致藍色跨度元素溢出黃色和黑色框。最小寬度的動態變化

我知道，我可以用overflow屬性來隱藏/滾動它，但我寧願要調整#inner和#outer容器來覆蓋它（這樣滾動條寧願整個頁面，而不是在含div上）。有什麼辦法嗎？

「藍色跨度」的內容（=寬度）是從應用程序動態生成的？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<style type="text/css"> 
    #outer {background: black; width: 300px; margin: 10px auto; padding: 20px; } 
    #inner {background: yellow; min-width: 200px; height: 200px; } 
    #inner span { background: blue; display: block; width: 400px; } 
</style> 

<div id="outer"> 
    <div id="inner"> 
     <span>&nbsp;</span> 
    </div> 
</div> 

</html>

來源

2014-07-21 tomas

您的#inner span元素是否需要400px的寬度？您可以刪除寬度並使#inner跨度顯示：塊。這是[小提琴]（http://jsfiddle.net/y49U7/） – miron

如果您希望兩個外框根據跨度中插入的內容動態調整大小，您將不得不重新考慮您的方法。所有動態縮放的框不能有定義的寬度，所以它們不能使用margin：auto來居中。但是，通過將整個東西包裝到另一個覆蓋頁面整個寬度的框中，可以達到相同的效果，以該框爲中心對齊文本，然後使外框顯示爲內嵌塊。這是可行的代碼。現在你可以添加一個最小寬度的內容框，如果你想，它會很好地縮放。下面有一些代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<style type="text/css"> 
    #wrap { 
     width: 100%; 
     text-align: center; 
    } 
    #outer { 
     display: inline-block; 
     background: black; 
     margin: 10px 0; 
     padding: 20px; 
    } 
    #inner { 
     background: yellow; 
     height: 200px; 
    } 
    #inner span { 
     background: blue; 
     display: block; 
    } 
</style> 
<div id="wrap"> 
<div id="outer"> 
    <div id="inner"> 
     <span>&nbsp;</span> 
    </div> 
</div> 
</div> 
</html>

來源

2014-07-21 15:32:40 somethinghere

我想是這樣，你可以添加％的單位爲你的部門，使其作爲完美

這裏是CSS

#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; } 
#inner {background: yellow; min-width: 200px; height: 200px; } 
#inner span { background: blue; display: block; }

這裏是小提琴

http://jsfiddle.net/mohamedmusthafac/n6CEx/

我認爲這是你所期待的？

來源

2014-07-21 16:02:06 musthafa

最小寬度的動態變化

回答

相關問題