Html Css修复-div中的图表项对齐不正确

代码在这里-

html-

<div id="main-div" style="height: 250px; margin-left: 10px;">

    <div class="sub-div">
       <div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
    <div class=""><small>L1</small></div>
    </div>


    <div class="sub-div">
       <div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
    <div class=""><small></small></div>
    </div>


    <div class="sub-div">
       <div class="">33%</div> <div class="d1" val="1" style="height: 33%"></div>
    <div class=""><small>L3</small></div>
    </div>


    <div class="sub-div">
       <div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
    <div class=""><small></small></div>
    </div>


    <div class="sub-div">
       <div>67%</div> <div class="d1" val="2" style="height: 67%"></div>
    <div class=""><small>L5</small></div>
    </div>


</div>

0% 
L1
0% 
33% 
L3
0% 
67% 
L5

---

如果您在JSFIDLE中看到输出，这些条将位于主div的下方。我想您可以猜到实际要求，所有条都应该位于底部，如果%为50，则frm bottom，条应高达主div的50%，以及标签%指示。

将css更改为低于1

  .sub-div {
    margin-right: 6%;
    display: inline-block;
    height: 250px;
    border: 1px solid green;
        **vertical-align:top;**
    }

---

尝试上面的代码…

用下面的代码更改css

  .sub-div {
    margin-right: 6%;
    display: inline-block;
    height: 250px;
    border: 1px solid green;
        **vertical-align:top;**
    }

尝试上面的代码…

CSS

您没有对齐在

.sub div

css类中添加这一行的条

vertical-align: top;

CSS

您没有对齐在

.sub div

css类中添加这一行的条

vertical-align: top;

---

我想这正是你需要的-。为了简化代码的工作方式，我已经对代码进行了大量的重新排列，但基本上它使用绝对定位来让条粘到底部。如果有什么不清楚的地方，请告诉我

每个栏现在都使用HTML：

<div class="bar-container">
    <div class="bar" style="height:50%">
        <span class="percentage">50%</span>
        <span class="label">L1</span>
    </div>
</div>

50%
L1

我想这就是你需要的-。为了简化代码的工作方式，我已经对代码进行了大量的重新排列，但基本上它使用绝对定位来让条粘到底部。如果有什么不清楚的地方，请告诉我

每个栏现在都使用HTML：

<div class="bar-container">
    <div class="bar" style="height:50%">
        <span class="percentage">50%</span>
        <span class="label">L1</span>
    </div>
</div>

50%
L1

您是否尝试进行可视化？简单提示：在其中一个条上使用

高度：100%

将使其高于主分区的高度。您是否尝试进行可视化？简单提示：在其中一个条上使用

高度：100%

将使其高于主分区的高度。如果您看到，粉红色条没有正确对齐，底部应该有标签（如10px），上面是粉红色，顶部是%（同样是10px）。我不明白你的问题？？请你详细解释一下。。。我对你先前的评论感到困惑。你想做什么？如果你看到，粉色条没有正确对齐，底部应该有标签（如10px），上面是粉红色，顶部是%（同样是10px）。我不明白你的问题？？请你详细解释一下。。。我对你先前的评论感到困惑。你想完成什么？