html에서 칼럼의 넓이값을 %로 줄 때 한쪽만 %를 지정해주고 나머지는 알아서 나머지를 채우게 하는(?)방법이 궁금합니다.



여기서 col1에 넓이값을 만약 60%를 줬을 때 col2에 넓이값을 지정해주지 않아도 알아서 남은 공간(40%)만큼 채우게 하는방법이 궁금합니다.. 가능하다는건 아는데 도무지 방법이 생각이 안나네요;

  • 2016년 04월 12일에 작성됨

  • 칼럼이라면, Table 에서 td/th 태그를 의미하는건가요?    허대영(Daeyoung Heo)   2016.4.12 20:16     
  • 아뇨 편의상 칼럼이라고 한건데.. table을 말씀드린건 아닙니다. div로 일정 크기안에 두칼럼짜리 레이아웃을 구현할 때 한쪽에만 %로 width값을 주고 나머지 한쪽은 알아서 사이즈를 계산해서 나머지 width값만큼 채워지는걸 말씀드린건데.. 말로 하려니 좀 어렵네요ㅠ    서예훈   2016.4.12 20:40     
조회수 557


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

의 답변에 보시면 비슷하 코드가 있는데 참고가 되면 좋겠네요

  • 2016년 04월 12일에 작성됨

  • 답변 감사합니다.. 그런데 첨부해주신 링크는 장고라는프레임웍을 이용하는거 같은데.. 제가 어렴풋이 기억하는 방법은 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>

원하시는게 맞는지 모르겠네요.

  • 2016년 04월 12일에 수정됨
    리눅스(유닉스) 기반의 시스템에서 웹 서비스를 개발하고 있습니다.
  • 2016년 04월 12일에 작성됨
    리눅스(유닉스) 기반의 시스템에서 웹 서비스를 개발하고 있습니다.

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close