Question

我正在制作响应式条形图，一切都很顺利，除了在全视图中，条形图似乎颠倒了。没有任何意义，因为其他一切（文本和其他样式）都是正确的。

您可以在此处查看我的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) {

}

我一遍又一遍地审查了我的代码 - 我被卡住了！提前谢谢。

Answer 1

您的CSS中有错误。

你有：

vertical align: bottom

你需要一个大肆宣传：

.chart li {
   vertical-align:bottom
}

Answer 2

您应该将vertical-align: bottom;添加到.bar类。

请注意垂直和对齐

之间的短划线

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>

CSS3条形图是颠倒的吗？

2 个答案: