Question

这是图表的html。我希望第二个（中间）div从第一个（顶部）div结束处开始（即在其75px宽度的右端），所以在下面的样式中，我将中间div的margin-left设置为960x75像素。继续这种模式，我希望第三个（底部）div从中间div结束的地方开始。由于顶部和中间div的宽度为120px，因此我将底部div的margin-left:设置为120px。从this jsfiddle可以看出，三个div都是从左边缘开始，而不是缩进所需的像素数。

实现这种效果的正确方法是什么，我不能笨拙的方式？（注意，div应该保持在不同的行上，而不是组合成一行）

HTML

 <div class="another_chart">Blah blah graph
      <div class="another_blue" style="width: 75px;">25</div>
      <div class="another_pink" style="width: 45px;">15</div>
      <div class="another_yellow" style="width: 60px;">20</div>
 </div>

CSS

.another_chart div {
    text-align:right;
    padding:3px;
    margin:1px;
    color:#000;
    width:600px
}

.another_blue {
    font:15px sans-serif;
    background-color:#4682b4;
    text-align:right;
    padding:3px;
    margin:1px;
    color:#fff;
    height:20px;
    line-height:20px
}

.another_pink {
    font:15px sans-serif;
    background-color:#f5c5f2;
    text-align:right;
    padding:3px;
    margin-left:75px;//the middle div should start 75px from the left color  
    height:20px;
    line-height:20px
}

.another_yellow {
    font:15px sans-serif;
    background-color:#ebfa02;
    text-align:right;
    padding:3px;
    margin-left:120px;//the bottom div should start 120px from the left
    color
    height:20px;
    line-height:20px
}

Answer 1

向左浮动并应用上边距。

Have a fiddle!

CSS

.another_chart div {
    float: left;
}

HTML

<div class="another_chart">
    <div class="another_blue" style="width: 75px;">25</div>
    <div class="another_pink" style="width: 45px; margin-top: 2em;">15</div>
    <div class="another_yellow" style="width: 60px;  margin-top: 4em;">20</div>
</div>

您还可以删除一些冗余的CSS样式：

Cleaner fiddle!

.another_chart div {
    text-align: right;
    font: 15px sans-serif;
    padding: 3px;
    color: #000;
    width: 600px;
    float: left;
    height: 20px;
}
.another_blue {
    background-color: steelblue;
}
.another_pink {
    background-color: #f5c5f2;
}
.another_yellow {
    background-color: #ebfa02;
}

将嵌套的div相对于彼此定位

1 个答案: