2015-04-05 67 views
0

这是我的HTML和JS。我曾尝试在bottomWrappertopList上填充填充,但由于某种原因,这两个填充对于padding-right都不起作用。其他风格似乎很好。没有什么是浮动的或我知道的任何东西。有任何想法吗?这是一个适用于Android的WebView,但在这种情况下,我只需在浏览器中呈现此代码就可以获得相同的行为。填充权无效,请帮忙?

<html> 
<head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawVisualization); 

function drawVisualization() { 
    // Some raw data (not necessarily accurate) 
    var data = google.visualization.arrayToDataTable([ 
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'], 
    ['2004/05', 165,  938,   522,    998,   450,  614.6], 
    ['2005/06', 135,  1120,  599,    1268,   288,  682], 
    ['2006/07', 157,  1167,  587,    807,   397,  623] 
    ]); 

    var options = { 
    // title : 'Top Texters', 
    legendTextStyle: { color: 'white' }, 
    // titleTextStyle: { color: 'white' }, 
    vAxis: { 
     title: "Points", 
     titleTextStyle: { color: 'white' }, 
     textStyle: 
      {color: 'white'}, 
    }, 
    hAxis: { 
     title: "Month", 
     titleTextStyle: { color: 'white' }, 
     textStyle: 
      {color: 'white'}, 
    }, 
    seriesType: "bars", 
    series: {5: {type: "line"}}, 
    backgroundColor: { fill:'transparent' } 
    }; 

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 
    </script> 
</head> 

<body style="background-color:#02071D;"> 

<div id="topWrapper" style="width:100%;"> 
    <h1 style="color: white; padding-left: 22px; margin-bottom: -28px;">Top Texters</h1> 
    <div id="chart_div" style="width: 80%; height: 350px;margin:0 auto;"></div> 
</div> 
<div id="bottomWrapper" style="width:100%"> 
    <div id="topList" style="width:100%;height:200px;background-color:#FFFFFF;padding:15px;"></div> 
</div> 
</body> 
</html> 

回答

1

div从浏览器窗口中掉出。只需将填充的div放入框中即可:border-box;一切都很好!

+0

哇,真不错,不完全确定为什么这个工作,但它做了,非常感谢!我会在几分钟内接受答案,当它让我:) – Houdini 2015-04-05 17:15:59

+0

谢谢=)如果你想看看这个不错的文章:http://www.paulirish.com/2012/box-sizing-border-box-ftw/我使用通用盒子大小方法来。 – Shimakuro 2015-04-05 17:19:21