html에서 칼럼의 넓이값을 %로 줄 때 한쪽만 %를 지정해주고 나머지는 알아서 나머지를 채우게 하는(?)방법이 궁금합니다.
조회수 7258회
여기서 col1에 넓이값을 만약 60%를 줬을 때 col2에 넓이값을 지정해주지 않아도 알아서 남은 공간(40%)만큼 채우게 하는방법이 궁금합니다.. 가능하다는건 아는데 도무지 방법이 생각이 안나네요;
-
(•́ ✖ •̀)
알 수 없는 사용자
3 답변
-
.html
<div class="container"> <div class="col1"> col1 </div> <div class="col2"> col2 </div> </div>
위와 같은 HTML 마크업이 있다고 가정할 때, 아래와 같은 두가지 방법을 제안 드립니다.
Solution 1: Flexbox를 이용하는 방법
https://jsfiddle.net/qy3rmn9w/1/
.container { display: flex; } .col1 { flex-grow: 3; background-color: gray; } .col2 { flex-grow: 2; background-color: lightgray; }
Solution 2: Table을 이용하는 방법
https://jsfiddle.net/4xa2o39q/
.container { display: table; width: 100%; } .col1 { display: table-cell; width: 60%; background-color: gray; } .col2 { display: table-cell; background-color: lightgray; }
-
(•́ ✖ •̀)
알 수 없는 사용자
-
-
http://hashcode.co.kr/questions/1689
의 답변에 보시면 비슷하 코드가 있는데 참고가 되면 좋겠네요
-
(•́ ✖ •̀)
알 수 없는 사용자
- 답변 감사합니다.. 그런데 첨부해주신 링크는 장고라는프레임웍을 이용하는거 같은데.. 제가 어렴풋이 기억하는 방법은 pure css로 가능했던 거라서요.ㅠ 그런데 그것과는 별개로 링크걸어주신 프레임웍 굉장히 쓸만해보이네요 ㅎㅎ 알 수 없는 사용자 2016.4.12 20:41
-
-
다음과 같이 한번 css 로 해보시는건 어떨까요?
.table { position: relative; width: 100%; /* 다음은 편의상 잘보이게 하려고 추가 */ height: 200px; } .col1 { display: inline-block; width: 60%; /* 다음은 편의상 잘보이게 하려고 추가 */ height: 100%; background-color: yellow; /* 노란색 배경.*/ } .col2 { display: inline-block; position: absolute; left: 60%; /* 왼쪽 60% 에서 부터 */ right: 0; /* 오른쪽 끝까지 */ /* 다음은 편의상 잘보이게 하려고 추가 */ height: 100%; background-color: cyan; /* 노란색 배경.*/ }
그리고 HTML 은 다음과 같이 하면 될것 같습니다.
<div class="table"> <div class="col1">왼쪽 60%</div> <div class="col2">나머지 오른쪽</div> </div>
원하시는게 맞는지 모르겠네요.
댓글 입력