텍스트 및 회전 된 텍스트의 세로 맞춤 문제가 있습니다.

Question

간단한 막대 차트를 만들려고하지만 CSS에 큰 문제가 있습니다. 그리고 예, 잠시 동안 D3에 대해 머리를 깍지 만 포기하고 내 자신을 만들기로 결정했습니다. 여기 내 코드는 다음과 같습니다.

큰 페이지에서 추출됩니다.이 페이지는 단일 div에 포함되어 있지만 별도의 페이지에 넣었습니다.

#B2Card { 
 
    height: 340px; 
 
    padding: 0; 
 
    padding-bottom: 5px; 
 
} 
 

 
#B2CardLeft { 
 
    position: absolute; 
 
    height: inherit; 
 
    float: left; 
 
    width: 10%; 
 
    text-align: right; 
 
} 
 

 
#B2CardRight { 
 
    float: right; 
 
    width: 90%; 
 
    height: inherit; 
 
} 
 

 
#BarChart { 
 
    float: left; 
 
    height: 75%; 
 
    width: 100%; 
 
    border-left: 2px solid white; 
 
    border-bottom: 2px solid white; 
 
    text-align: left; 
 
} 
 

 
#BarChartXAxis { 
 
    float: left; 
 
    height: 25%; 
 
    width: 100%; 
 
    background-color: #0FC; 
 
} 
 

 
.verticaltext { 
 
    position: absolute; 
 
    transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    -webkit-transform: rotate(-90deg); 
 
    bottom: -85%; 
 
    color: #fff; 
 
}

<div id="B2Card"> 
 
    <div id="B2CardLeft"> 
 
    <p class="YAxis">60</p> 
 
    <p class="YAxis">50</p> 
 
    <p class="YAxis">40</p> 
 
    <p class="YAxis">30</p> 
 
    <p class="YAxis">20</p> 
 
    <p class="YAxis">10</p> 
 
    </div> 
 
    <div id="B2CardRight"> 
 
    <div id="BarChart"></div> 
 
    <div id="BarChartXAxis"> 
 
     <p class="verticaltext" style="left:32%;">2017-10-10</p> 
 
     <p class="verticaltext" style="left:33%;">2017-10-11</p> 
 
     <p class="verticaltext" style="left:34%;">2017-10-12</p> 
 
     <p class="verticaltext" style="left:35%;">2017-10-13</p> 
 
     <p class="verticaltext" style="left:36%;">2017-10-14</p> 
 
    </div> 
 
    </div> 
 
</div>

내 첫 번째이자 가장 중요한 문제는 안정적으로 낮은 DIV (#BarChartXAxis에 위치하는 X 축에서 회전 된 텍스트 (클래스 = "verticaltext") 얻을 수 있다는 것입니다). 난 왼쪽/오른쪽/아래 등 모든 종류의 값을 시도했지만 텍스트는 모든 곳으로갑니다. 나는 마침내 위의 코드를 사용하여 작업하게 만들었지 만, 브라우저 창 크기를 변경하자마자 다시 munged됩니다. 날짜가 즉석에서 생성되므로 날짜가 7 일, 최대치가 90 일 수 있습니다. 따라서 동적으로 조정할 수 있어야합니다.

내 두 번째 문제는 사소한 것입니다. - (# B2CardLeft)에있는 Div의 하단에 Y 축 텍스트를 놓을 수 없습니다.

위의 두 가지 모두 jQuery를 사용하면 기꺼이 신뢰할 수 있습니다. TIA!

Answer 1

는 첫 번째 문제를 해결하려면

#B2Card { 
 
    height: 340px; 
 
    padding: 0; 
 
    padding-bottom: 5px; 
 
} 
 

 
#B2CardLeft { 
 
    height: inherit; 
 
    float: left; 
 
    width: 10%; 
 
    text-align: right; 
 
} 
 

 
#B2CardRight { 
 
    float: right; 
 
    width: 90%; 
 
    height: inherit; 
 
    position: relative; 
 
} 
 

 
#BarChart { 
 
    float: left; 
 
    height: 75%; 
 
    width: 100%; 
 
    border-left: 2px solid white; 
 
    border-bottom: 2px solid white; 
 
    text-align: left; 
 
} 
 

 
#BarChartXAxis { 
 
    float: left; 
 
    height: 25%; 
 
    width: 100%; 
 
    background-color: #0FC; 
 
} 
 

 
.verticaltext { 
 
    position: absolute; 
 
    transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    -webkit-transform: rotate(-90deg); 
 
    bottom: 15px; 
 
    color: #fff; 
 
}

<div id="B2Card"> 
 
    <div id="B2CardLeft"> 
 
    <p class="YAxis">60</p> 
 
    <p class="YAxis">50</p> 
 
    <p class="YAxis">40</p> 
 
    <p class="YAxis">30</p> 
 
    <p class="YAxis">20</p> 
 
    <p class="YAxis">10</p> 
 
    </div> 
 
    <div id="B2CardRight"> 
 
    <div id="BarChart"></div> 
 
    <div id="BarChartXAxis"> 
 
     <p class="verticaltext">2017-10-10</p> 
 
     <p class="verticaltext" style="left:4%">2017-10-11</p> 
 
     <p class="verticaltext" style="left:8%">2017-10-12</p> 
 
     <p class="verticaltext" style="left:12%">2017-10-13</p> 
 
     <p class="verticaltext" style="left:16%">2017-10-14</p> 
 
    </div> 
 
    </div> 
 
</div>