CSS를 사용하여 분할 막대 차트

Question

CSS를 사용하여 분할 막대 차트를 만들려고합니다. 내가이 의미하는 것은 어쨌든

_____  __________ 
__|____| Text |_________| 
|_______| Text |___|__ 
|______| Text |______| 

(원유 도면을 용 서하십시오! 나는 그것이 의미가 희망)

, 내가 지금까지 가지고있는 코드는 내가 첨부 한 내용을 생성 ...이 같은 것입니다

<dl style="width: 600px"> 
<dt>2008</dt> 
<dd><div id="data-one" class="bar" style="width: 5%">&nbsp;</div></dd> 
<dt>2009</dt> 
<dd><div id="data-two" class="bar" style="width: 80%">&nbsp;</div></dd> 
<dt>2010</dt> 
<dd><div id="data-three" class="bar" style="width: 64%">&nbsp;</div></dd> 
<dt>2011</dt> 
<dd><div id="data-four" class="bar" style="width: 30%">&nbsp;</div></dd> 
<dt>2012</dt> 
<dd><div id="data-five" class="bar" style="width: 30%">&nbsp;</div></dd> 
<dt>2013</dt> 
<dd><div id="data-six" class="bar" style="width: 30%">&nbsp;</div></dd> 
</dl> 

CSS :

이 JSFiddle

HTML에

저는 몇 시간 동안 이걸 가지고 놀았지만, 텍스트의 중앙 열 왼쪽에 두 번째 막대를 놓는 것이 최선의 방법입니다. 내가 가지고있는 가장 가까운 것은 서로의 꼭대기에 2 개의 막대기를 얻고 있었다?! 나는 이것을하는 더 좋은 방법이 있다고 가정하지만 솔직히 단서가 없습니다. 아무도 가능한 해결책이 있습니까?

많은 감사, 데이브

http://jsfiddle.net/jfMTg/ 그래서 난 내 래퍼를 넣고 확인, 3 열을 만들어

Answer 1

설명 목록 (<dl>, <dt>, <dd>)을 사용하면 HTML 흐름을 깨지 않으면 서 약간 어려워집니다. 그러나 나는 작동하는 방식을 찾았으며 대부분 유동적이라고 생각합니다.

---

우선하여 적절한 HTML 구조를 유지하고, 추가 <dd> 요소로 두 번째 바를 추가

<dt>2008</dt> 
<dd> 
    <div id="data-one-left" class="bar" style="width:10%">&nbsp;</div> 
</dd> 
<dd> 
    <div id="data-one-right" class="bar" style="width: 5%">&nbsp;</div> 
</dd> 

다음, <dt> 요소 중심 그들에게 유체의 폭과 높이를 줄 :

dl { 
    width: 100%; 
} 
dt { 
    height: 2rem; 
    width: 8%; 
    margin: 0 auto; 
    text-align: center; 
    line-height: 2rem; 
} 

을

이제 <dd> 요소에 나머지 너비를주고 왼쪽/오른쪽으로 부순다 :

dd { 
    width: 46%; 
    margin: -2rem; 
} 
dd:nth-of-type(odd), 
dd:nth-of-type(even) div { 
    float: left; 
} 
dd:nth-of-type(even), 
dd:nth-of-type(odd) div { 
    float: right; 
} 

여기서는 작동 jsfiddle입니다.

---

나는이 솔루션에 대해 싫어하는 한 가지, 내가 일을 정렬하기 위해 <dd> 요소에게 <dt> 요소의 높이와 같은 부정적인 위쪽 여백을주고 있다고합니다. 어쩌면 다른 사람이 이것을 처리 할 수있는 더 나은 방법을 생각해 낼 수 있습니다 ... 나는 아무것도 생각할 수 없었습니다.

Answer 2

edgeLeft | 센터 | edgeRight

왼쪽 열에 방향을 추가하면 rtl을 사용하여 원하는 효과를냅니다.

#wrapper { width:100%;} 
#edgesLeft{width:35%; background:#f5f5f5; display:inline-block; direction: rtl;} 
#edgesRight{width:35%; background:#f5f5f5; display:inline-block; padding-left:40px;} 
#center{width:25%; text-align: center;display:inline-block;} 

희망이 있습니다.

Answer 3

http://jsfiddle.net/E9QF9/ 무엇을 찾고 계십니까? 나는 많은 변화가 있었기 때문에 실제로 그 변화를 설명 할 수 없다. 단지 당신의 테이블을보고 두 것을 비교하라!예컨대

<dd> 
    <div id="data-six-left" class="bar" style="width: 60%">&nbsp;</div> 
</dd> 
<dd> 
    <div id="data-six-right" class="bar" style="width: 0%">&nbsp;</div> 
</dd> 

변경 왼쪽에 필요한 값의 60 %, 변경 오른쪽에 필요한 값을 0 % (기본적으로, 데이터 값은 HTML에서).