HTML/CSS中的垂直條形

Question

我該如何構建垂直條形，所有相鄰（從頁面左邊到另一邊）（所有相同大小的寬度）相鄰（觸摸）？

Answer 1

這會做的伎倆爲您提供：

<div id="wrapper"> 
    <div class="bar green"></div> 
    <div class="bar greener"></div> 
    <div class="bar greenest"></div> 
    <div class="bar greenerest"></div> 
</div> 

而CSS與它去：

html, body, #wrapper, .bar { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

#wrapper { 
    width: 50%; 
} 

.bar { 
    float: left; 
    width: 25%; /* must never add up to more than 100% */ 
} 

.green { 
    background-color: #a8ff00; 
} 

.greener { 
    background-color: #7ad800; 
} 

.greenest { 
    background-color: #3eb603; 
} 

.greenerest { 
    background-color: #2c7e03; 
} 

你可以看到它in action here。