Question

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

我的问题是图表的宽度不固定，取决于内容。 我可以使用width：auto根据需要设置图表宽度。如果没有，只有CSS才能实现它。

编辑：即使容器必须滚动，我希望块在一行中。这可能只是使用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>

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

Answer 1

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

＆＃13;

.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;}

＆＃13;

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

＆＃13;

Answer 2

您可以尝试使用display: table-cell;

只有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;background:#ccc;padding:10px;display: table-cell;}

https://jsfiddle.net/us5Ljz7t/4/

Answer 3

white-space:nowrap可以解决问题。

.container {
  float: left;
  width: 300px;
  background: #e3e3e3;
  height: 200px;
  overflow: auto;
}
.sidebar {
  float: left;
  width: 100px;
  background: #666;
  height: 200px;
}
.chart {
  /* width:800px;*/
  white-space: nowrap; /* ← added */
  margin: 50px 20px;
}

<div class="container">
  CONTAINER
  <div class="chart">
    Dynamically adding chart content here
  </div>
</div>
<div class="sidebar">
  SIDEBAR
</div>

Answer 4

您可以使用width: inherit，这样宽度将取自父元素，即容器div。

.container{
  float:left;
  width:300px;
  background:#e3e3e3;
  height:200px;
  overflow:auto;
}
.sidebar{
  float:left;
  width:100px;
  background:#666;
  height:200px;
}
.chart{
  margin:50px 20px;
  width: inherit
}
.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 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>

Here is the fiddle

可以宽度：自动扩展div超出屏幕宽度

4 个答案: