到目前为止,我正在尝试生成条形图,我已经到了可以生成漂亮条形图的阶段,但问题是这些图是从上到下生成的,这是完全错误的,例如,请看下面的代码片段:
注意:我希望图表从下往上生成,请问如何在 CSS 而不是 CSS3/HTML5 中实现这一点?
IMP:请解决方案避免在 CSS 中使用 flex 属性。
.chart {
overflow: hidden;
height: 300px;
position: absolute;
left: 89.5px;
}
.bar-container {
float: left;
margin-right: 4px;
width: 50px;
height: 300px;
display:list-item;
list-style-type: none;
}
.bar {
background-color: #e8ba45;
width: 31px;
text-align: center;
}
.linux {
background-color: #f03748;
}
.macos {
background-color: #1b4a52;
}
.balloon-text {
color: white;
position: absolute;
top: 13px;
font-size: 14px;
width: 35px;
text-align: center;
}
<div class="chart">
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:30% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:10% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:20% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
</div>
最佳答案
如果您不喜欢 display: flex;
的解决方案, 那么你可以尝试使用 table positioning连同 vertical-align:bottom;
:
.chart {
overflow: hidden;
height: 300px;
position: absolute;
left: 89.5px;
}
.bar-container {
margin-right: 4px;
width: 50px;
height: 300px;
position: relative;
display: table-cell;
vertical-align:bottom;
}
.bar {
background-color: #e8ba45;
width: 31px;
text-align: center;
}
.linux {
background-color: #f03748;
}
.macos {
background-color: #1b4a52;
}
.balloon-text {
color: white;
top: 13px;
font-size: 14px;
width: 35px;
text-align: center;
position: absolute;
}
.ballon-wrapper {
position: relative;
}
<div class="chart">
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:30% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:10% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:20% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
<div class="bar-container">
<div class="ballon-wrapper">
<div class="ff3 balloon-text">12</div>
<img src="https://image.ibb.co/n2Njev/graph_bar_balloon.png" style="width: 35px;">
</div>
<div class="bar windows" style="padding:50% 0;">5</div>
<div class="bar linux" style="padding:40% 0;">4</div>
<div class="bar macos" style="padding:100% 0;">3</div>
</div>
</div>
关于html - 我的 HTML/CSS 图形条是从上到下生成的,这是错误的吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45654376/