html - jar 宽度:auto expand the div beyond screen width

Question

我有一个动态创建的图表，其宽度可能会不断增加。它被放置在一个具有固定宽度和自动滚动的容器内。因此，如果图表比容器宽，图表就会滚动。

我的问题是图表的宽度不是固定的，它取决于内容。 我可以使用 width:auto 根据需要设置图表宽度吗？如果没有，有什么办法只用 CSS 来实现它。

编辑:即使容器必须滚动，我也希望 block 位于一行中。仅使用 CSS 就可以实现这一点吗？

.container{
  float:left;
  width:300px;
  background:#e3e3e3;
  height:200px;
  overflow:auto;
}
.sidebar{
  float:left;
  width:100px;
  background:#666;
  height:200px;
}
.chart{
  margin:50px 20px;
}
.block{width:100px;float:left;background:#ccc;margin:10px;}

<div class="container">
CONTAINER
  <div class="chart">
    <div class="block">100</div>
    <div class="block">200</div>
    <div class="block">300</div>
    <div class="block">400</div>
    <div class="block">500</div>
  </div>
</div>
<div class="sidebar">
SIDEBAR
</div>

block 必须水平对齐。使用图像更新以显示输出布局

Answer 1

如果将 .block 从 float: left 更改为 display: inline-block 并设置 white-space: nowrap 在您的 .chart 上，它们将水平排列。

.container{
  float:left;
  width:300px;
  background:#e3e3e3;
  height:200px;
  overflow:auto;
}
.sidebar{
  float:left;
  width:100px;
  background:#666;
  height:200px;
}
.chart{
  margin:50px 20px;
  white-space: nowrap;
}
.block{width:100px;background:#ccc;margin:10px;display: inline-block;}

<div class="container">
CONTAINER
  <div class="chart">
    <div class="block">100</div>
    <div class="block">200</div>
    <div class="block">300</div>
    <div class="block">400</div>
    <div class="block">500</div>
  </div>
</div>
<div class="sidebar">
SIDEBAR
</div>