Question

编写HTML条形图。目前，Divs / Bars的名称/标签出现在栏内。有没有办法可以让它们出现在标记到它左端的条形图之外。

<!DOCTYPE html>
<style>

.chart div {
  font: 10px Ubuntu;
  background-color: white;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: black;
  float: right;
  clear:both;
}

</style>
<div class="chart">
<div style="width:0px;">Inwood 10</div>
<div style="width:3px;">Washington Heights 111</div>
<div style="width:7px;">Hamilton Heights 230</div>
<div style="width:10px;">Chinatown 314</div>
<div style="width:10px;">East Harlem 346</div>
<div style="width:16px;">Harlem 514</div>
<div style="width:18px;">Morningside Heights 590</div>
<div style="width:24px;">Battery Park 804</div>
<div style="width:25px;">Little Italy 814</div>
<div style="width:25px;">Yorkville 841</div>
<div style="width:33px;">North Sutton Area 1088</div>
<div style="width:37px;">Carnegie Hill 1228</div>
<div style="width:47px;">Tribeca 1544</div>
<div style="width:50px;">Central Park 1654</div>
<div style="width:51px;">Financial District 1684</div>
<div style="width:62px;">Lower East Side 2050</div>
<div style="width:64px;">Soho 2112</div>
<div style="width:71px;">West Village 2333</div>
<div style="width:89px;">Murray Hill 2932</div>
<div style="width:110px;">East Village 3642</div>
<div style="width:117px;">Clinton 3873</div>
<div style="width:137px;">Greenwich Village 4511</div>
<div style="width:140px;">Garment District 4614</div>
<div style="width:189px;">Chelsea 6225</div>
<div style="width:229px;">Gramercy 7568</div>
<div style="width:297px;">Upper West Side 9808</div>
<div style="width:428px;">Upper East Side 14113</div>
<div style="width:439px;">Midtown 14490</div>


</div>

How it currently looks

How i would like it to look

Answer 1

您可以将文字放在另一个＆lt;“div”＆gt;并将其浮动到栏的左侧。这是我想到的唯一方式，但我也有点新意。希望它有所帮助。

Answer 2

我不认为你可以在包含元素之外移动文本。你应该做的是为标签和条本身创建单独的元素（例如div）。条形div可以包含在标签的div中。像这样：

<div>
  Label
  <div style="width:123px"></div>
</div>

Answer 3

以下是您可以如何使用它的示例。我不是CSS wiz，但我想这可能是一个很好的起点。运行代码段以查看结果

.chart div {
  font: 10px Ubuntu;
  background-color: red;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: black;
  white-space: nowrap;
  position: relative;
  float: right;
  clear: both;
}
.chart div span {
  position: absolute;
  right: 15px;
}

<!DOCTYPE html>
<div class="chart">
  <div style="width:0px;"><span>Inwood</span> 10</div>
  <div style="width:3px;"><span>Washington Heights</span> 111</div>

</div>

将图表Div名称移动到外部条形图

3 个答案: