CSS：图表退出容器

Question

我不确定这是怎么控制的，你能指出我吗？我是CSS的新手。

调整窗口大小时图表获取容器。在CSS中你在哪里控制它？ 我不需要调整图表大小，至少只是隐藏它？那可能吗？

我正在使用twitter bootstrap，这里是生成的HTML

  <div class='row-fluid'>
    <div class='span9'>
      <div class='box'>
        <div class='box-content padded' style='text-align: center'>
          <div id='graphs' style='width:860px; margin:0 auto;' title='test'>
            <div id='chart' style='display: inline-block;' title='test'></div>
          </div>
        </div>
      </div>
    </div>
    <div class='span3'>
      <div class='box'>
        <div class='box-content padded'>
          Hosts ...
        </div>
      </div>
      <div class='box'>
        <div class='box-content padded'>
          <b> Services ... </b>
          <br> .... </br>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

调整图表大小以适合父容器很容易;只需在图表上使用width:100%即可。因此，在您的代码中，替换此代码：

<div id='graphs' style='width:860px; margin:0 auto;' title='test'>

使用此代码：

<div id='graphs' style='width:100%; margin:0 auto;' title='test'>

这样做是将图形宽度设置为父元素的百分比，即父类div box-content padded。因此，如果我们将width设置为100%，则图表始终与容器的大小相匹配。