4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
1. 아래 카드 박스들을 한 화면에 다 보여지게 하려면 어떻게 해야하나요 ㅠㅠ flex박스 주고 width 잘 준것 같은데.....(아래 html과 css 남겨 드리겠습니다.) 2. 그리고 차트도 반응형처럼 하려면 어떻게 해야하나요?
<html><div class="main_container"> <h2>Dashboard</h2> <div class="row"> <div class="col"> <div> <p>Earning(Monthly)</p> <p>$400,000</p> </div> <i class="fas fa-calendar"></i> </div> <div class="col"> <div> <p>Earning(Annual)</p> <p>$800,000</p> </div> <i class="fas fa-dollar-sign"></i> </div>
<div class="col"> <div> <p>Tasks</p> <p>13</p> </div> <i class="fas fa-tasks"></i> </div> <div class="col"> <div> <p>Requests</p> <p>26</p> </div> <i class="fas fa-comments"></i> </div> </div> </div> -------------------------------------------- <CSS>
.main_container { position: absolute; left: 70px; top: 100px; width: 100%; } .row { display: flex; justify-content: center; align-items: center; }.col { border: 0.5px solid black; border-radius: 5px; margin-left: 10px; width: 25%; display: flex; justify-content: space-between; align-content: center; padding: 10px; } .col i { font-size: 30px; color: rgb(126, 126, 126); line-height: 300%; text-align: center; margin-right: 20px; }.col p { font-size: 18px; line-height: 10px; margin-left: 10px; } .chart_container { position: absolute; background-color: rgb(214, 214, 214); top: 300px; left: 70px; width: 60%; box-shadow: 1px 1px 5px rgb(170, 170, 170); border: 0px; } .chart_box { background-color: white; border: 0px; }
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.