0

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

I want to create a little chart which is scaling vertically.

Why is the chart not inside the yellow main div?

I thought I should clear after all 4 chart divs?

This is my code see also jsfiddle link above...

<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>

UPDATE

I have created another sample with less markup but showing the same problem:

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

The layout is going out of the wrapper div.

Instead of float:left for the main divs I use display:inline-block so the divs are also left "floate" and and are treated like block elements so I can set a width.

How can I keep my vertically stretching/scaling divs and the layout is not going over the wrapper div?

4

2 に答える 2

0

実際には黄色の div 内にありますが、ラッパーの高さは 100% です。

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

これにより、div が 100% を超えて大きくなるのを防ぎます。高さを auto に変更すると、コンテンツがラップされていることがわかります。

<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 に答える