当文本多于一行时，内联 - 柔性div被推下

时间：2021-11-12 05:29:38

I'm working on an HTML/CSS chart that displays a series of financial groupings and visually shows how that money is distributed between companies. I've noticed that when the company names are long enough to take up multiple lines, its containing div drops down a bit.

我正在开发一个HTML / CSS图表，显示一系列财务分组，并直观地显示这些资金是如何在公司之间分配的。我注意到，当公司名称长到足以占用多行时，其包含的div会下降一点。

I have the following fiddle: https://jsfiddle.net/s1pxkj7q/1/

我有以下小提琴：https：//jsfiddle.net/s1pxkj7q/1/

Why are those divs getting pushed down and how do I correct it?

为什么这些div被推倒，我该如何纠正？

Thanks!

谢谢！

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

#layers {
  width: 1000px;
  height: 400px;
  margin: 0 auto;
}

#layer-headings {
  width: 1000px;
  margin: 0 auto;
}

#layer-headings h3 {
  width: 50%;
  text-align: center;
  float: left;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 50px;
}

#consumed {
  width: 50%;
  height: 100%;
  outline: 1px solid #999;
  display: inline-block;
  margin: 0;
  vertical-align: top;
}

#available {
  width: 50%;
  height: 100%;
  display: inline-block;
  margin: 0;
}

#layers h3 {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 10px 0;
}

#layers .graph {
  height: 100%;
  width: 100%;
  border-bottom: 1px solid #999;
}

#layers h4 {
  font-size: 12px;
  text-align: center;
}

#layers .graph-box {
  margin-left: 5%;
  width: 75%;
  height: 100%;
  float: left;
  outline: 1px solid #555;
}

#layers .graph-box h4 {
  font-weight: bold;
  display: block;
  margin: 0 auto;
}

#layers .graph-label {
  margin-right: 5%;
  padding-left: 10px;
  width: 15%;
  height: 100%;
  vertical-align: top;
  display: flex;
  align-items: center;
}

#layers .graph-label h3 {
  margin: 0;
  padding: 0;
}

#layers .graph-col {
  height: 100%;
  display: inline-flex;
  align-items: center;
  outline: 1px solid #555;
}

#layers .graph-label.pdf {
  display: inline-block;
}

#layers .graph-col.pdf {
  display: inline-block;
}

.blue-grad {
  background: #3085dd;
  /* Old browsers */
  background: -moz-linear-gradient(left, #3085dd 0%, #60abf8 50%, #3085dd 100%);
  /* FF3.6-15 */
  background: -webkit-gradient(linear, left top, right top, from(#3085dd), color-stop(0.5, #60abf8), to(#3085dd));
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(left, #3085dd 0%, #60abf8 50%, #3085dd 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #3085dd 0%, #60abf8 50%, #3085dd 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3085dd', endColorstr='#3085dd', GradientType=1);
  /* IE6-9 */
}

.red-grad {
  background: #e54b29;
  /* Old browsers */
  background: -moz-linear-gradient(left, #e54b29 0%, #fc8364 50%, #e54b29 100%);
  /* FF3.6-15 */
  background: -webkit-gradient(linear, left top, right top, from(#e54b29), color-stop(0.5, #fc8364), to(#e54b29));
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(left, #e54b29 0%, #fc8364 50%, #e54b29 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #e54b29 0%, #fc8364 50%, #e54b29 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e54b29', endColorstr='#e54b29', GradientType=1);
  /* IE6-9 */
}

.yellow-grad {
  background: #e2dd31;
  /* Old browsers */
  background: -moz-linear-gradient(left, #e2dd31 0%, #fffa7a 50%, #e2dd31 100%);
  /* FF3.6-15 */
  background: -webkit-gradient(linear, left top, right top, from(#e2dd31), color-stop(0.5, #fffa7a), to(#e2dd31));
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(left, #e2dd31 0%, #fffa7a 50%, #e2dd31 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #e2dd31 0%, #fffa7a 50%, #e2dd31 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e2dd31', endColorstr='#e2dd31', GradientType=1);
  /* IE6-9 */
}

.green-grad {
  background: #3bdb30;
  /* Old browsers */
  background: -moz-linear-gradient(left, #3bdb30 0%, #8cf984 50%, #3bdb30 100%);
  /* FF3.6-15 */
  background: -webkit-gradient(linear, left top, right top, from(#3bdb30), color-stop(0.5, #8cf984), to(#3bdb30));
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(left, #3bdb30 0%, #8cf984 50%, #3bdb30 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #3bdb30 0%, #8cf984 50%, #3bdb30 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3bdb30', endColorstr='#3bdb30', GradientType=1);
  /* IE6-9 */
}

.purple-grad {
  background: #894bed;
  /* Old browsers */
  background: -moz-linear-gradient(left, #894bed 0%, #be99ff 50%, #894bed 100%);
  /* FF3.6-15 */
  background: -webkit-gradient(linear, left top, right top, from(#894bed), color-stop(0.5, #be99ff), to(#894bed));
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(left, #894bed 0%, #be99ff 50%, #894bed 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #894bed 0%, #be99ff 50%, #894bed 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#894bed', endColorstr='#894bed', GradientType=1);
  /* IE6-9 */
}

.orange-grad {
  background: #d89531;
  /* Old browsers */
  background: -moz-linear-gradient(left, #d89531 0%, #fcce99 50%, #d89531 100%);
  /* FF3.6-15 */
  background: -webkit-gradient(linear, left top, right top, from(#d89531), color-stop(0.5, #fcce99), to(#d89531));
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(left, #d89531 0%, #fcce99 50%, #d89531 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #d89531 0%, #fcce99 50%, #d89531 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d89531', endColorstr='#d89531', GradientType=1);
  /* IE6-9 */
}

.cyan-grad {
  background: #49e5e0;
  /* Old browsers */
  background: -moz-linear-gradient(left, #49e5e0 0%, #b8f9f5 50%, #49e5e0 100%);
  /* FF3.6-15 */
  background: -webkit-gradient(linear, left top, right top, from(#49e5e0), color-stop(0.5, #b8f9f5), to(#49e5e0));
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(left, #49e5e0 0%, #b8f9f5 50%, #49e5e0 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #49e5e0 0%, #b8f9f5 50%, #49e5e0 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#49e5e0', endColorstr='#49e5e0', GradientType=1);
  /* IE6-9 */
}

.deepblue-grad {
  background: #3b52d3;
  /* Old browsers */
  background: -moz-linear-gradient(left, #3b52d3 0%, #7692f7 50%, #3b52d3 100%);
  /* FF3.6-15 */
  background: -webkit-gradient(linear, left top, right top, from(#3b52d3), color-stop(0.5, #7692f7), to(#3b52d3));
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(left, #3b52d3 0%, #7692f7 50%, #3b52d3 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #3b52d3 0%, #7692f7 50%, #3b52d3 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3b52d3', endColorstr='#3b52d3', GradientType=1);
  /* IE6-9 */
}

.pink-grad {
  background: #db3dce;
  /* Old browsers */
  background: -moz-linear-gradient(left, #db3dce 0%, #fc94f5 50%, #db3dce 100%);
  /* FF3.6-15 */
  background: -webkit-gradient(linear, left top, right top, from(#db3dce), color-stop(0.5, #fc94f5), to(#db3dce));
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(left, #db3dce 0%, #fc94f5 50%, #db3dce 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #db3dce 0%, #fc94f5 50%, #db3dce 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#db3dce', endColorstr='#db3dce', GradientType=1);
  /* IE6-9 */
}

#layers #consumed .graph {
  padding-right: 5%;
  position: relative;
}

#layers #consumed .graph-col {
  vertical-align: bottom;
}

#layers #consumed .graph-label {
  float: left;
  margin-left: 5%;
}

#layers #consumed .graph-row {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-right: 5%;
}

#layers #consumed .graph-box {
  margin-left: 0;
}
<div id="layers">
  <div id="available">
    <div class="graph">
      <div class="graph-row" style="height:20%;">
        <div class="graph-box red-grad" style="outline:1px solid #555;">
          <div class="graph-col" style="width:40%;">
            <h4>40%<br>Short</h4>
          </div>
          <div class="graph-col" style="width:20%;">
            <h4>20%<br>This is a long one</h4>
          </div>
          <div class="graph-col" style="width:30%;">
            <h4>30%<br>Short</h4>
          </div>
          <div class="graph-col" style="width:10%;">
            <h4>10%<br>Short</h4>
          </div>
        </div>
        <div class="graph-label">
          <h3>$750,000</h3>
        </div>
      </div>
      <div class="graph-row" style="height:27%;">
        <div class="graph-box cyan-grad">
          <div class="graph-col" style="width:20%;">
            <h4>20%<br>Short</h4>
          </div>
          <div class="graph-col" style="width:40%;">
            <h4>40%<br>Short</h4>
          </div>
          <div class="graph-col" style="width:15%;">
            <h4>15%<br>Short</h4>
          </div>
          <div class="graph-col" style="width:10%;">
            <h4>10%<br>Short</h4>
          </div>
          <div class="graph-col" style="width:15%;">
            <h4>15%<br>Short</h4>
          </div>
        </div>
        <div class="graph-label">
          <h3>$1,000,000</h3>
        </div>
      </div>
      <div class="graph-row" style="height:27%;">
        <div class="graph-box yellow-grad">
          <div class="graph-col" style="width:25%;">
            <h4>25%<br>Short</h4>
          </div>
          <div class="graph-col" style="width:22%;">
            <h4>22%<br>This is a long one</h4>
          </div>
          <div class="graph-col" style="width:18%;">
            <h4>18%<br>Short</h4>
          </div>
          <div class="graph-col" style="width: 17%;">
            <h4>17%<br>Short</h4>
          </div>
          <div class="graph-col" style="width:18%;">
            <h4>18%<br>Short</h4>
          </div>
        </div>
        <div class="graph-label">
          <h3>$1,000,000</h3>
        </div>
      </div>
      <div class="graph-row" style="height:14%;">
        <div class="graph-box purple-grad">
          <div class="graph-col" style="width:100%;">
            <h4>100%<br>Short</h4>
          </div>
        </div>
        <div class="graph-label">
          <h3>$500,000</h3>
        </div>
      </div>
      <div class="graph-row" style="height:12%;">
        <div class="graph-box orange-grad">
          <div class="graph-col" style="width:100%;">
            <h4>100%<br>Short</h4>
          </div>
        </div>
        <div class="graph-label">
          <h3>$400,000</h3>
        </div>
      </div>
    </div>
  </div>
</div>

1 个解决方案

#1

1  

The problem is baseline alignment due to the vertical-align property.

由于vertical-align属性，问题是基线对齐。

The vertical-align property applies to inline-level and table-cell elements (source).

vertical-align属性适用于内联级和表格单元格（源）。

Since you're dealing with inline-level containers (display: inline-flex), vertical-align is being applied and its default value is baseline.

由于您正在处理内联级容器（display：inline-flex），因此正在应用vertical-align，其默认值为baseline。

Simply override that with vertical-align: top on your containers.

只需在容器上使用vertical-align：top覆盖它。

#layers .graph-col {
    height: 100%;
    display: inline-flex;
    align-items: center;
    outline: 1px solid #555;
    vertical-align: top; /* NEW */
}

#1

1  

The problem is baseline alignment due to the vertical-align property.

由于vertical-align属性，问题是基线对齐。

The vertical-align property applies to inline-level and table-cell elements (source).

vertical-align属性适用于内联级和表格单元格（源）。

Since you're dealing with inline-level containers (display: inline-flex), vertical-align is being applied and its default value is baseline.

由于您正在处理内联级容器（display：inline-flex），因此正在应用vertical-align，其默认值为baseline。

Simply override that with vertical-align: top on your containers.

只需在容器上使用vertical-align：top覆盖它。

#layers .graph-col {
    height: 100%;
    display: inline-flex;
    align-items: center;
    outline: 1px solid #555;
    vertical-align: top; /* NEW */
}
标签：

相关文章