Question

我正在创建一个图形，条形图位于底部，我不想在水平方向上修复位置。因为酒吧有各种宽度。

我想要这样http://jsfiddle.net/y2c8t/但是让条形图放在底部。

HTML

<div class="container">
   <div class="bar" style="height: 80px; background-color: #090;"></div>
   <div class="bar" style="height: 60px; background-color: #060;"></div>
   <div class="bar" style="height: 40px; background-color: #030;"></div>
</div>

CSS

.container {
    width: 100%; 
    height: 100px; 
    background-color: #CCC; 
    position: relative;    
}
.bar {
    width: 40px; 
    background-color: #060; 
    position: absolute; 
    bottom: 0px;
}

这是我的代码：http://jsfiddle.net/53uHp/

Answer 1

我也可以插入。删除float:left并添加display:inline-block;

.container {
    width: 100%; 
    height: 100px; 
    background-color: #CCC;    
}
.bar {
    display:inline-block;
    width: 40px; 
    background-color: #060; 
    position: relative;
    top:20px;
    margin:0;
    padding:0;    
}

jSFiddle

Answer 2

您必须尽可能避免使用内联样式。我的建议在这里：

<强> HTML

<div class="container">
    <div class="bar" id="bar1"></div>
    <div class="bar" id="bar2"></div>
    <div class="bar" id="bar3"></div>
</div>

<强> CSS

.container {
    width: 100%; 
    height: 100px; 
    background-color: #CCC; 
    position: relative;    
}
.bar {
    width: 40px; 
    background-color: #060; 
    bottom: 0px;
    float: left;
}

#bar1{
  height: 80px; background-color: #090;position:absolute;  
}
#bar2{
  height: 60px; background-color: #060;position:absolute;left:40px;
}
#bar3{
   height: 40px; background-color: #030;position:absolute;left:80px;
}

fiddle

Answer 3

您可以将以下样式添加到容器元素：

transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);

Answer 4

您可以尝试删除相对定位并将display: inline-block和vertical-align: bottom添加到.bar，并将line-height: 100px添加到.container。即使您调整容器高度，要确保条纹保持在底部，请确保调整行高值以对应新的高度。

http://jsfiddle.net/JF4sB/

.container {
    width: 100%; 
    height: 100px; 
    line-height: 100px;
    background-color: #CCC; 
}
.bar {
    display: inline-block;
    vertical-align: bottom;
    width: 40px; 
    background-color: #060; 
}

Answer 5

我也相信绝对定位可以作为答案，但是，这里的其他答案都必须针对您必须为每个新的酒吧做特殊情况。所以相反，为什么不将条形图包装成一个内容持有者，浮动它们，并将它们放在那些内部。

我基于你的榜样...因为我感觉很懒，但这里正在发生的事情

<强> HTML

<div class="container">
    <div class="bar-container">
        <div class="bar" style="height: 80px; background-color: #090;"></div>
    </div>
    <div class="bar-container">
        <div class="bar" style="height: 60px; background-color: #060;"></div>
    </div>
    <div class="bar-container">
        <div class="bar" style="height: 40px; background-color: #030;"></div>
    </div>
</div>

用条形容器包裹每个条形，这样我们就可以漂浮它们并同时将它们放在底部。

<强> CSS

.container {
    width: 100%; 
    height: 100px; 
    background-color: #CCC;   
}
.bar-container {
    width: 40px; 
    float: left;
    height: inherit;
    position: relative;
}
.bar {
    position: absolute;
    bottom: 0;
    width: 100%;
}

条形容器是浮动的，因此您可以拥有任意数量的条形图，高度设置为与容器相同，否则它们看起来好像没有内容（绝对定位的内部内容对其没有影响）它）和位置相对，所以我们可以将酒吧自己放在底部。并且条形现在具有绝对位置，因此它们现在相对于父div放置（因为它具有除静态之外的位置）和bottom：0指定它们应该位于底部。 width属性允许它们保持宽度。

以下是JS Fiddle的外观：

http://jsfiddle.net/y2c8t/4/

通过这种方式，您可以随时添加内容而无需为每种内容添加特殊情况。

如何将div放在容器的底部

5 个答案: