HTML/CSS의 세로 막대

세로 막대를 구성하면 페이지 왼쪽에서 가로로 같은 크기의 서로 인접한 (터치하는) 방법은 어떻게됩니까?HTML/CSS의 세로 막대

<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는 함께 갈 :

출처

2010-07-27 thesimpledesigner

분명히하기 위해 어떤 종류의 수직 막대를 찾고 있습니까? 내용의 열? 레이아웃에서 열을 구분 하시겠습니까? 아니면 백그라운드에서 수직선을 의미합니까? 미안 해요,하지만 당신이 뭘 찾고 있는지 잘 모르겠어요. – derekerdmann

그 목적으로 이미지를 사용할 수 있습니다. –

"게시물 삭제"횡설수설로 변경된 내용을 롤백 한 이유는 없습니다. 답변을 제공하는 데 시간을 투자 한 사람들에게는 불공평합니다. – Davy8

이것은 트릭을 할 것

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을 볼 수 있습니다.

출처

2010-07-28 01:30:20 Pat

HTML/CSS의 세로 막대

답변

관련 문제