html - 将图表 Div 名称移动到外部栏

标签 html css

编写 HTML 条形图。目前,Divs/Bars 的名称/标 checkout 现在 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

最佳答案

您可以将文本放在另一个 <"div"> 中并将其 float 到栏的左侧。这是我想到的唯一方法,但我也是新手。希望对您有所帮助。

关于html - 将图表 Div 名称移动到外部栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34791364/

相关文章:

javascript - 如何使用javascript计算DIV中的字符数

html - 不正确的媒体查询被应用于 html 元素

html - 替代?朗德斯克?标题?什么去哪里,特别是对于图片较多的网站?

html - 变换属性 CSS3 比例但停留在底部

html - VBA Web Scraping 使用 getElementsByClassName 获取名称和地址

css - div 边框不围绕内容

javascript - 在 datePicker 中禁用单元格并更改它们的颜色

javascript - 如何解决 Javascript 中的圈复杂度

html - 为什么我网站的这一部分有白色背景?

javascript - jQuery - 点击类 - 获取其他类