Question

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

为什么图表不在黄色主要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中。

而不是浮动：左侧为主div我使用display：inline-block所以div也被“浮动”并被视为块元素，所以我可以设置宽度。

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

Answer 1

它实际上在黄色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/

Answer 2

您的结算<div>无效HTML：

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

更改为：

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

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

为什么我的包装器div没有正确清除

2 个答案: