테스트 사이트 - 개발 중인 베타 버전입니다

div로 이런 레이아웃 가능한가요? 채택완료

헐크매니아 9년 전 조회 4,102

테이블로 만들면 금방인데 div로 해보려고 합니다.

어떻게 해야 될까요?

http://sir.kr/data/editor/1611/46b4104d431535c67d71713d744dc65c_1479386005_0719.jpg">
 

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
s
sinbi Expert
9년 전

인터넷에서 calc 함수에 대해 검색해 보세요.

 

calc(%길이 - px길이)
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

헐크매니아
9년 전
정말 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

</p><p><!doctype html>
<html lang="kr" style="height:100%;">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body style="margin:0px 300px 0px 230px; height:100%; "></p><p> </p><p>   <div style="width:200px; height:100%; margin-left:-200px; float:left; background-color:yellow;">
    200px
   </div></p><p> </p><p>   <div style="width:100%; height:100%; float:left; background-color:green;">
    100%
   </div></p><p>   </p><p>   <div style="width:300px; height:100%; margin-right:-300px; float:right; background-color:orange;">
    300px
   </div></p><p> </p><p> </body>
</html></p><p>

디자이너 아님... 개발자임... 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 5개

s
sinbi
9년 전
승희아빠 님 대단하세요. 천재심 ^^
숟가락 얹어 소스 정리해봤습니다.
http://codepen.io/sinbi/pen/yVVKVq
승희아빠
9년 전
@sinbi 감사합니다... 천재는 아닙니다. 한 1시간 이리 저리 하다 얻어걸린 겁니다.
레이아웃은 오랜만에 만들어 본거라...
정리하신 소스는 숟가락 얹은 정도가 아니라 밥상을 새로 차린듯 깔끔하네요.
디자이너시면 함께 일하고 싶은 맘이 막 듭니다.
반응형 처리까지... 님이야 말로 천재신듯...
s
sinbi
9년 전
정말 기발한 아이디어에요. 역시, 개발자세용. ^^
헐크매니아
8년 전
허 이건 또다른 방법인가요? calc랑 이 방식하고 뭐가 더 모든 브라우저에 호환이 잘되나요?
참고하겠습니다. 감사합니다.
승희아빠
8년 전
calc는 css3에서만 지원 되는걸로 압니다.
호환은 제 방법이 좋겠지만... calc가 간편합니다.
css3 미지원 브라우저에서는 따로 지원 가능한 스크립트가 있으니까요

댓글을 작성하려면 로그인이 필요합니다.

 

 

 

 

이런식도 있습니다

  •  

    로그인 후 평가할 수 있습니다

    답변에 대한 댓글 1개

    헐크매니아
    9년 전
    네 윗방법대로 큰 div안에 작은 div 3개를 넣었는데 float속성을 left로 주면 되긴하는데 가운데 div 넓이를 100%하면 틀어지네요.

    댓글을 작성하려면 로그인이 필요합니다.

    네  

    로그인 후 평가할 수 있습니다

    답변에 대한 댓글 1개

    헐크매니아
    9년 전
    어떻게 해야될지 알수있을까요? div옆에 div가 붙게 어떻게 하는지?

    댓글을 작성하려면 로그인이 필요합니다.

    답변을 작성하려면 로그인이 필요합니다.

    로그인