將圖表分區名稱移動到外部條塊

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

來源

2016-01-14 Jamie2483

你可以把在另一個< 「格」的文本>，並漂浮到欄的左側。它是我想到的唯一方式，但我也是新的。希望能幫助到你。

來源

2016-01-14 14:01:48 Sebellin

我不認爲你可以移動包含元素以外的文本。你應該做的是爲標籤和條形本身創建單獨的元素（例如div）。酒吧div可以包含在標籤的div內。這樣的事情：

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

來源

2016-01-14 14:07:49 user2170710

這裏是你如何使它的工作。我不是CSS專家，但我想這可能是一個很好的起點。運行該代碼段看到的結果

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

來源

2016-01-14 14:13:23

嘿！非常感謝您花時間發表評論。我已經放棄了它，並且適用於前幾個小節，但最終會重疊，如附圖所示。 http://i.imgur.com/LIAzeVL.png – Jamie2483

將圖表分區名稱移動到外部條塊

回答

相關問題