最小宽度的动态变化

时间:2014-07-21 14:52:42

标签: html css

这是一段简单的代码,导致蓝色的span元素溢出黄色和黑色框。

我知道,我可以使用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>

2 个答案:

答案 0 :(得分:0)

如果您希望两个外框根据插入的内容动态调整大小,则必须重新考虑您的方法。所有动态缩放的框都不能定义宽度,因此无法使用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>

答案 1 :(得分:0)

我认为您可以为您的部门添加%单位以使其完美

这是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/

我认为这就是你所期待的?