이런 레이아웃 어떻게 만듭니까?
본문
특성은 그림에 써놓은것과 같습니다.
현재는 wrap을 만들어서 wrap에 table속성을 주고
left와 right 각각에 table-cell 속성을 주어서 만들었으나 구버전 ie와 파폭에서 문제가 있어서
다시좀 만드려고 합니다.
left는 right의 유무에 따라 가변적으로 가로길이가 100%였다가 100%-300px(right 가로길이)
였다가 하는걸로
right는 자바스크립트로 토글시켜서 있었다가 없었다가 하게 하려고 합니다.
right가 left위에 떠서 가리는게 아니라 left가 right만큼 작아졌다 커졋다 하는겁니다.
조언좀 구합니다.
답변 4
반응형 으로 작업하시면됩니다.
<style type="text/css">
.div1 { position: relative; width:calc(100% - 200px); height:100px; float:left; }
.div2 { position: relative; width:200px; height:100px; float:right;}
/* 1200 이상일 경우 */
@media all and (min-width:1200px) {
}
/* 1199 ~ 992 일때 */
@media all and (max-width:1199px) and (min-width:992px) {
}
/* 991 ~ 768 일때 */
@media all and (max-width:991px) and (min-width:768px) {
}
</style>
<div class="div1"></div>
<div class="div2"></div>
<div style="clear: both;"></div><!-- float 초기화 -->
각 브라우저 사이즈에 맞도록 @media 를 활용하셔서 css 를 변동시켜주시면되겠습니다.
@media 를 활용하시면 브라우저 사이즈에 맞는 유동적인 스타일을 주실수 있습니다.
!-->
혹시 이런건가요?
https://magnets.jp/demo/urakawa/drawer/
https://magnets.jp/web_design/4946/
설명이 일본어로 되어있긴한데 코드만 보면 되니까요 ㅡ,. ㅡ ㅋ
이건 url 을 올려주셔야 정확한 답변이 될듯하네요
답변을 작성하시기 전에 로그인 해주세요.