묻고답하기
div 테이블 코드좀 만들어 주세요
2016.05.09 03:00
위젯을 넣으려는데
이렇게 만들고 싶은데요 좌 우 내용의 크기가 달라도 빨간라인이 뒤틀어지지? 않고 동일하게 늘고 줄어들게 했으면 하는데
제대로 배우신 분들에겐 별거 아닐것같은데
저는 그냥 복붙 고치기로 만드는 사람이라 부끄럽게도 어떻게 해야할지를 모르겠습니다.
테이블태그라면 쉽게 만들겠는데 div로 만드려니 머리를 쥐어짜서 아무리해보아도 개판이 되더라구요.
부탁드리겠습니다.
댓글 11
-
1052
2016.05.09 13:28
음 방법이 없을까요. 위젯의 내용에따라 유동적이라 세로값을 넣어버리면 여백이 뒤죽박죽이 될것같아서..
-
빨간영역의 div 를 겉에 짜고
그 내부에 좌측div / 우측 div 를 넣으시면 되죠
<div style="width:100%; float:left;">
<div style="float:left; width:48%;">좌측</div>
<div style="float:right; width:48%;">우측</div>
</div>
형태로.. ( 그러면 굳이 height 없이도 가능합니다) -
1052
2016.05.09 13:25
그냥 나열하는정도야 뭐 어렵지않은데 중간에 낀 3,4 5 이 부분이 문제라서요..
동적으로 크기가 바뀌는 위젯이라 자꾸 뭉게져서 골치가 아픕니다.
일단은 3,4번을 나누지말고 그냥 줄바꿈처리해서 쓰면 될것같긴해요.
답변 감사합니다.
-
imyouridea
2016.05.09 13:31
<div style="width:100%;">
<div style="float:left; width:50%;">
<div style="display:inline-block; height:40px;">1</div>
<div style="display:inline-block; height:40px;">3</div>
<div style="display:inline-block; height:40px;">4</div>
<div style="display:inline-block; height:40px;">6</div>
<div style="display:inline-block; height:40px;">8</div>
</div>
<div style="float:right; width:50%;">
<div style="display:inline-block; height:40px;">2</div>
<div style="display:inline-block; height:80px;">5</div>
<div style="display:inline-block; height:40px;">7</div>
<div style="display:inline-block; height:40px;">9</div>
</div>
</div>이거써보세여
-
1052
2016.05.09 13:41
height가 들어가면 안될것같아서 약간 애매하지만 답변 감사드립니다.
사실 그냥 편법으로다가 3.4번을 div로 나누지말고 br로 처리해버릴까 하던중입니다.
고려해보도록 응용해보도록 할께요.
div를 나누는법을 이해는 하고 있는데 막상 직접 만드려니 의외로 골치가 아프네요 ㅋㅋ 역시 기초가 튼튼해야하는것같습니다.
-
imyouridea
2016.05.09 14:43
네! 화이팅!
-
<style>
.clearBoth:after{content:"";display:block;clear:both;border-bottom:1px solid red;}
.w50{width:50%;float:left;}
.padding20{padding:20px 0;}
</style>
<div class="clearBoth">
<div class="w50 padding20">
1
</div>
<div class="w50 padding20">
2
</div>
</div>
<div class="clearBoth">
<div class="w50">
<div class="padding20">3</div>
<div class="padding20">4</div>
</div>
<div class="w50 padding20">
5
</div>
</div>
<div class="clearBoth">
<div class="w50 padding20">
6
</div>
<div class="w50 padding20">
7
</div>
</div>
<div class="clearBoth">
<div class="w50 padding20">
8
</div>
<div class="w50 padding20">
9
</div>
</div>이런 형태인데요.
조금 실력이 있다 싶으면 위젯에서 강제적으로 높이값이 일정하도록 잡아야 하고요..
그게 아니라면 이쪽에서 div의 높이값을 설정하는게 편할겁니다.
-
<style>
.table {display:table;width:100%;}
.table-row {display:table-row;}
.table-cell{display:table-cell;height:auto;border-bottom:1px solid #e0e0e0;vertical-align:top;}
.w-50{width:50%;float:left;}
.w-100{width:100%;}
.b-1{border-bottom:1px solid #e0e0e0;}
</style>
<div class="table">
<div class="table-row">
<div class="table-cell w-50">
1
</div>
<div class="table-cell w-50">
2
</div>
</div>
<div class="table-row">
<div class="table-cell w-50">
<div class="w-100 b-1">
3
</div>
<div class="w-100">
4
</div>
</div>
<div class="table-cell w-50">
5
</div>
</div>
<div class="table-row">
<div class="table-cell w-50">
6
</div>
<div class="table-cell w-50">
7
</div>
</div>
<div class="table-row">
<div class="table-cell w-50">
8
</div>
<div class="table-cell w-50">
9
</div>
</div>
</div> -
이렇게 쓰는 것이 더 좋겠네요
<style>
.fl {floaf:left;}
.table {display:table;width:100%;}
.table-row {display:table-row;}
.table-cell{display:table-cell;height:auto;border-bottom:1px solid #e0e0e0;vertical-align:top;}
.w-50{width:50%;float:left;}
.w-100{width:100%;}
.b-1{border-bottom:1px solid #e0e0e0;}
</style>
<div class="table">
<div class="table-row">
<div class="table-cell w-50">
1
</div>
<div class="table-cell w-50">
2
</div>
</div>
<div class="table-row">
<div class="table-cell w-100">
<div class="w-50 fl">
<div class="w-100 b-1">
3<br />3<br />3<br />3<br />3<br />
</div>
<div class="w-100">
4
</div>
</div>
<div class="w-50 fl">
5
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell w-50">
6
</div>
<div class="table-cell w-50">
7
</div>
</div>
<div class="table-row">
<div class="table-cell w-50">
8
</div>
<div class="table-cell w-50">
9
</div></div>
</div> -
ie를 고려안한다면 flexbox를 쓰는 것이 간단명료함.
이건 어차피 높이값 넣어야 합니다.