使用div創建垂直條

我正在創建兩個水平條，如下面的示例所示，僅使用html和css。我使用下面的代碼：使用div創建垂直條

<div style="height: 150px;"> 
    <div style="width: 55px;float:left;"> 
     <div>340.8</div> 
     <div style="background-color:#95111d; height: 75px;"> 
      &nbsp; 
     </div> 
    </div> 
    <div style="width:55px;float:left"> 
     <div>340.8</div> 
     <div style="background-color:#9e9e9e; height: 115px;"> 
      &nbsp; 
     </div> 
    </div> 
    <br style="clear: both" /> 
</div>

的問題，這是兩個酒吧都坐在自己包含分區的頂部，而不是在底部，所以你得到以下圖片效果的第2位。

我有一些代碼將生成這些酒吧的高度，所以我不能只是添加頂部填充/保證金推入他們的位置。有沒有辦法做到這一點，而不訴諸於JavaScript來計算保證金和底部對齊他們？

enter image description here

End Result

來源

2012-12-26 Mikeb

這是應該做的工作（沒有absolute positioning使用）的CSS和標記 -

DEMO

HTML：

<div id="wraper"> 
    <div id="c1"> 
    <div id="h1">340.8</div> 
     <div id="b1"> 
      &nbsp; 
     </div> 
    </div> 
    <div id="c2"> 
     <div id="h2">340.8</div> 
     <div id="b2"> 
      &nbsp; 
     </div> 
    </div> 
    <br style="clear: both" /> 
</div>

CSS：

#wraper { 
    height: 150px; 
} 

#c1 { 
    width: 55px; 
    vertical-align: bottom; 
    display: inline-block; 
} 

#b1 { 
    background-color: #95111d; 
    height: 75px; 
} 

#c2 { 
    width: 55px; 
    margin-left: -4px; 
    display: inline-block; 
} 

#b2 { 
    background-color: #9e9e9e; 
    height: 115px; 
}

DEMO

來源

2012-12-26 06:43:38 Cdeez

您可以使用絕對定位的元件固定到其容器的底部。

HTML：

<div class="container"> 
    <div class="bar"> 
     <div> 
      <div>340.8</div> 
      <div style="background-color:#95111d; height: 75px;">&nbsp;</div> 
     </div> 
    </div> 
    <div class="bar"> 
     <div> 
      <div>340.8</div> 
      <div style="background-color:#9e9e9e; height: 115px;">&nbsp;</div> 
     </div> 
    </div> 
    <br style="clear: both" /> 
</div>

CSS：

.container { 
    height: 150px; 
} 

.bar { 
    width: 55px; 
    float: left; 
    position: relative; 
    height: 100%; 
} 

.bar > div { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    text-align: center; 
}

例子：http://jsfiddle.net/grc4/pAnqe/1/

來源

2012-12-26 06:42:54 grc

您可以使用內聯塊元素，並給他們一個垂直對齊得到預期的效果底部的價值。這裏有一些簡單的html和css。

HTML

<span class="bar" style="height:75px;background-color:#95111d;"> 
     <div class="label">340.8</div> 
    </span> 
    <span class="bar" style="height:115px;background-color:#9e9e9e;"> 
     <div class="label">350.1</div> 
    </span>

CSS

.bar { 
    display:inline-block; 
    width: 55px; 
    vertical-align:bottom; 
} 
.label { 
    position:relative; 
    top:-1em; 
}

來源

2012-12-26 06:47:04

<html> 
    <body> 
    <div style="height: 150px;position:relative;" > 
    <div style="width: 55px;float:left;position:absolute;bottom:0;left:0px;"> 
    <div style="background-color:#95111d; height: 75px;">&nbsp;</div> 
    <div>340.8</div> 
    </div> 
    <div style="width:55px;float:left;position:absolute;bottom:0;left:55px;"> 
    <div style="background-color:#9e9e9e; height: 115px;">&nbsp;</div> 
    <div>340.8</div> 
    </div> 
    <br style="clear: both" /> 
    </div> 
    </body> 
</html>

jsFiddle

來源

2012-12-26 06:48:02 alereis

使用div創建垂直條

回答

相關問題