0

http://jsfiddle.net/sWb7j/75/

我想创建一个垂直缩放的小图表。

为什么图表不在黄色主 div 内？

我想我应该清除所有 4 个图表 div 吗？

这是我的代码，另请参见上面的 jsfiddle 链接...

<div id="chart" style="background-color:yellow;width:100%;height:100%;">
    <div id="replyTimes" style="background-color:red;width:100px;float:left;height:100%;">            
        <div style="height:100%;" >
            <div style="background-color:white;height:100%;">
                <div style="text-align:center;height:10%;"> </div>
                <div style="background-color:#ff33cc;text-align:center;height:40%;"> 5 min</div>
                <div style="background-color:#ff44cc;text-align:center;height:25%;"> 10 min</div>
                <div style="background-color:#ff55cc;text-align:center;height:25%;"> 15 min</div>
            </div>
        </div>
        <div>
            <div>
               <div style="text-align:center;background-color:orange;width:100%;height:30px;"></div>
               <div style="text-align:center;background-color:#FAFAFA;width:100%;height:30px;">test</div>
            </div>  
        </div> 
    </div>
    <div id="totalResponse" style="background-color:brown;width:100px;height:100%;float:left;">       
        <div style="background-color:pink;height:100%;">
            <div style="background-color:white;text-align:center;height:10%;"></div>
            <div style="background-color:gray;text-align:center;height:40%;">1</div>
            <div style="background-color:gray;text-align:center;height:25%;">2</div>
            <div style="background-color:gray;text-align:center;height:25%;">3</div>
        </div>
        <div>
            <div style="text-align:center;background-color:violet;width:100%;height:30px;">TOTAL</div>
            <div style="text-align:center;background-color:#FAFAFA;width:100%;height:30px;">10</div>
        </div>
    </div>    
    <div id="responsesWrapper" style="background-color:blue;height:100%;float:left;">
        <div style="width:50px;height:100%;">  
            <div style="background-color:orange;height:100%;"> 
                <div style="background-color:#aa99cc;text-align:center;height:30%;">30</div>
                <div style="background-color:#aa66cc;text-align:center;height:40%;">40</div>
                <div style="background-color:#aa33cc;text-align:center;height:30%;">30</div>
            </div>           
            <div>
                <div style="text-align:center;background-color:pink;height:30px;">TF1</div>
                <div style="text-align:center;background-color:#FAFAFA;height:30px;">25</div>
            </div> 
        </div>    
    </div>
     <div id="responsesWrapper" style="background-color:blue;height:100%;float:left;">
        <div style="width:50px;height:100%;">  
            <div style="background-color:violet;height:100%;"> 
                <div style="background-color:#fdc;text-align:center;height:30%;">30</div>
                <div style="background-color:#fde;text-align:center;height:30%;">30</div>
                <div style="background-color:#fdf;text-align:center;height:40%;">40</div>
            </div>           
            <div>
                <div style="text-align:center;background-color:pink;height:30px;">TF1</div>
                <div style="text-align:center;background-color:#FAFAFA;height:30px;">25</div>
            </div> 
        </div>    
    </div>
    <div style="clear: left;" />
</div>

更新

我创建了另一个标记较少但显示相同问题的示例：

http://jsfiddle.net/sWb7j/132/

布局超出了包装 div。

我使用 display:inline-block 而不是 float:left 作为主 div，所以 div 也保持“浮动”，并且被视为块元素，因此我可以设置宽度。

如何保持我的垂直拉伸/缩放 div 并且布局不会超过包装器 div？

4

2 回答 2

0

它实际上在黄色 div 内，但包装器上的高度为 100%

<div id="chart" style="background-color:yellow;width:100%;height:100%;">

这可以防止 div 变得大于 100% 如果我将高度更改为自动，您可以看到它确实包装了内容

<div id="chart" style="background-color:yellow;width:100%;height:auto;">

http://jsfiddle.net/sWb7j/77/

于 2013-06-14T15:38:13.053 回答
0

您的清算<div>不是有效的 HTML：

<div style="clear: left;" />

改成：

<div style="clear: left;"></div>

这可能无法回答您的问题，但请记住使用正确的 HTML 以防止发生进一步的错误。

于 2013-06-14T15:39:32.777 回答