CSS3条形图颠倒了吗？
CSS3条形图颠倒了吗？
提问于 2018-02-08 01:50:32
我正在制作一个响应式的条形图，一切都很顺利，除了在全景中，条形图似乎翻了个底朝天。这没有任何意义，因为其他一切(文本和其他样式)都是正确的。
你可以在这里看到我的HTML/CSS：https://codepen.io/janbe30/pen/YepGWB/，我也在下面粘贴了它。
<h1>Bold Goal Measures</h1>
<figure>
<!--<h2>Unhealthy Days</h2>-->
<figcaption>Modifiable Health Risks</figcaption>
<ul class="chart">
<li id="risk-1" class="bar" title="3.2">
<div class="count">3.2</div>
<div class="year">2012</div>
</li>
<li id="risk-2" class="bar" title="3.0">
<div class="count">3.0</div>
<div class="year">2013</div>
</li>
<li id="risk-3" class="bar" title="3.0">
<div class="count">3.0</div>
<div class="year">2014</div>
</li>
<li id="risk-4" class="bar" title="2.93">
<div class="count">2.93</div>
<div class="year">2015</div>
</li>
<li id="risk-5" class="bar" title="2.96">
<div class="count">2.96</div>
<div class="year">2016</div>
</li>
<li id="risk-6" class="bar" title="3.2">
<div class="count">3.2</div>
<div class="year">2017</div>
</li>
</figure>
body {
font-family: Helvetica, sans-serif;
color: rgb(65, 64, 66);
font-size: 1rem;
}
.chart {
width: 100%;
clear: both;
padding: 0;
}
.chart li {
display: block;
border-radius: 0.2em 0.2em 0 0;
height: 3em;
padding: 1.5em 0;
position: relative;
text-align: center;
vertical align: bottom;
}
/* Styling of bars and text */
.chart .bar {
background: linear-gradient(rgba( 65, 64, 66, .9), rgba(72,70,65, .9));
margin: 0.3em;
}
.chart .bar:last-child {
background: linear-gradient(rgba(78,131,23, .9), rgba(78,132,22, .9) 70%);}
.chart .count {
font-size: 1.8em;
font-weight: bold;
color: #fff
}
.chart .year {
font-size: 0.9em;
/*font-family: FSHumanaLight */
letter-spacing: 1px;
opacity: .6;
width: 100%;
color: #fff;
}
/* set widths for each bar based on percentages for each year
.chart #risk-1, #risk-6 { width: 64%; }
.chart #risk-2, #risk-3 { width: 60%; }
.chart #risk-4 { width: 58.6%; }
.chart #risk-5 { width: 59.2%; }*/
/*******************************
===== Media Queries ===========
******************************/
@media (min-width:700px){
.chart {
height: 20em;
margin: 0 auto -1em;
}
.chart li {
display: inline-block;
height: 25em;
margin: 0 1% 0 0;
width: 10% !important;
}
.chart .bar {
margin: 0.3em 0.1em;
}
.chart .year {
position: absolute;
bottom: 1em;
}
/* set widths for each bar based on percentages for each year */
.chart #risk-1, #risk-6 { height: 64%; }
.chart #risk-2, #risk-3 { height: 60%; }
.chart #risk-4 { height: 58.6%; }
.chart #risk-5 { height: 59.2%; }
}
@media (min-width: 1000px) {
}我已经一遍又一遍地检查了我的代码--我卡住了！提前谢谢。
回答 2
Stack Overflow用户
发布于 2018-02-08 01:54:41
您的CSS中存在错误。
您必须：
vertical align: bottom
你需要一个推论：
.chart li {
vertical-align:bottom
}Stack Overflow用户
发布于 2018-02-08 01:58:54
您应该向.bar类添加vertical-align: bottom;。
请注意竖直和对齐之间的破折号
body {
font-family: Helvetica, sans-serif;
color: rgb(65, 64, 66);
font-size: 1rem;
}
.chart {
width: 100%;
clear: both;
padding: 0;
}
.chart li {
display: block;
border-radius: 0.2em 0.2em 0 0;
height: 3em;
padding: 1.5em 0;
position: relative;
text-align: center;
vertical-align: bottom;
}
/* Styling of bars and text */
.chart .bar {
background: linear-gradient(rgba( 65, 64, 66, .9), rgba(72, 70, 65, .9));
margin: 0.3em;
vertical-align: bottom;
}
.chart .bar:last-child {
background: linear-gradient(rgba(78, 131, 23, .9), rgba(78, 132, 22, .9) 70%);
}
.chart .count {
font-size: 1.8em;
font-weight: bold;
color: #fff
}
.chart .year {
font-size: 0.9em;
/*font-family: FSHumanaLight */
letter-spacing: 1px;
opacity: .6;
width: 100%;
color: #fff;
}
/* set widths for each bar based on percentages for each year
.chart #risk-1, #risk-6 { width: 64%; }
.chart #risk-2, #risk-3 { width: 60%; }
.chart #risk-4 { width: 58.6%; }
.chart #risk-5 { width: 59.2%; }*/
/*******************************
===== Media Queries ===========
******************************/
@media (min-width:700px) {
.chart {
height: 20em;
margin: 0 auto -1em;
}
.chart li {
display: inline-block;
height: 25em;
margin: 0 1% 0 0;
width: 10% !important;
}
.chart .bar {
margin: 0.3em 0.1em;
}
.chart .year {
position: absolute;
bottom: 1em;
}
/* set widths for each bar based on percentages for each year */
.chart #risk-1,
#risk-6 {
height: 64%;
}
.chart #risk-2,
#risk-3 {
height: 60%;
}
.chart #risk-4 {
height: 58.6%;
}
.chart #risk-5 {
height: 59.2%;
}
}
@media (min-width: 1000px) {}<h1>Bold Goal Measures</h1>
<figure>
<!--<h2>Unhealthy Days</h2>-->
<figcaption>Modifiable Health Risks</figcaption>
<ul class="chart">
<li id="risk-1" class="bar" title="3.2">
<div class="count">3.2</div>
<div class="year">2012</div>
</li>
<li id="risk-2" class="bar" title="3.0">
<div class="count">3.0</div>
<div class="year">2013</div>
</li>
<li id="risk-3" class="bar" title="3.0">
<div class="count">3.0</div>
<div class="year">2014</div>
</li>
<li id="risk-4" class="bar" title="2.93">
<div class="count">2.93</div>
<div class="year">2015</div>
</li>
<li id="risk-5" class="bar" title="2.96">
<div class="count">2.96</div>
<div class="year">2016</div>
</li>
<li id="risk-6" class="bar" title="3.2">
<div class="count">3.2</div>
<div class="year">2017</div>
</li>
</figure>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48670321
复制相关文章
相似问题
腾讯云开发者
