조회 : 435
Style의 display 속성을
inline , inline-block , inline-table 로
사용시 부모 노드의 너비가 적을 때 한줄로 보이는 것에 대한 브라우저별 차이
IE6,7 : inline 만 지원됨
IE8 : inline-block 지원됨
FF,OPERA : inline , inline-block , inline-table 지원됨
CROME,SAFARI : inline-block , inline-table 지원됨
결론
기본값은 display:inline-block이고
IE6,IE7에선 IE핵으로 사용 /display:inline
결과
.xxx {display:inline-block;/display:inline;}
inline
<div id="rolling_1" style="width:150px; height:100px; overflow:visible; border:4px solid gray; position:relative; white-space:nowrap">
<table border="0" cellpadding="0" cellspacing="0" style="display:inline; width:100px; height:100px"><tr><td bgcolor="red">1</td></tr></table> <table border="0" cellpadding="0" cellspacing="0" style="display:inline;width:100px; height:100px"><tr><td bgcolor="blue">2</td></tr></table> <table border="0" cellpadding="0" cellspacing="0" style="display:inline;width:100px; height:100px"><tr><td bgcolor="green">3</td></tr></table>
</div>
inline-block
<div id="rolling_2" style="width:150px; height:100px; overflow:visible; border:4px solid gray; position:relative; white-space:nowrap">
<table border="0" cellpadding="0" cellspacing="0" style="display:inline-block;width:100px; height:100px"><tr><td bgcolor="red">1</td></tr></table> <table border="0" cellpadding="0" cellspacing="0" style="display:inline-block;width:100px; height:100px"><tr><td bgcolor="blue">2</td></tr></table> <table border="0" cellpadding="0" cellspacing="0" style="display:inline-block;width:100px; height:100px"><tr><td bgcolor="green">3</td></tr></table>
</div>
inline-table
<div id="rolling_3" style="width:150px; height:100px; overflow:hidden; border:4px solid gray; position:relative; white-space:nowrap">
<table border="0" cellpadding="0" cellspacing="0" style="display:inline-table;width:100px; height:100px"><tr><td bgcolor="red">1</td></tr></table><table border="0" cellpadding="0" cellspacing="0" style="display:inline-table;width:100px; height:100px"><tr><td bgcolor="blue">2</td></tr></table><table border="0" cellpadding="0" cellspacing="0" style="display:inline-table;width:100px; height:100px"><tr><td bgcolor="green">3</td></tr></table>
</div>
| 1 |
| 2 |
| 3 |
| 1 |
| 2 |
| 3 |
| 1 |
| 2 |
| 3 |
| 제목 |
|---|
| [기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js) |
| 유용한 리눅스(LINUX) 명령어 |
| [공지] 기술 게시판 |
일 |
월 |
화 |
수 |
목 |
금 |
토 |
|---|---|---|---|---|---|---|
|
11.30
|
12.1
|
12.2
|
12.3
|
12.4
|
12.5
|
12.6
|
|
12.7
|
12.8
|
12.9
|
12.10
|
12.11
|
12.12
|
12.13
|
|
12.14
|
12.15
|
12.16
|
12.17
|
12.18
|
12.19
|
12.20
|
|
12.21
|
12.22
|
12.23
|
12.24
|
12.25
|
12.26
|
12.27
|
|
12.28
|
12.29
|
12.30
|
12.31
|
1.1
|
1.2
|
1.3
|