조회 : 447
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) 명령어 |
| [공지] 기술 게시판 |
일 |
월 |
화 |
수 |
목 |
금 |
토 |
|---|---|---|---|---|---|---|
|
2.1
|
2.2
|
2.3
|
2.4
|
2.5
|
2.6
|
2.7
|
|
2.8
|
2.9
|
2.10
|
2.11
|
2.12
|
2.13
|
2.14
|
|
2.15
|
2.16
|
2.17
|
2.18
|
2.19
|
2.20
|
2.21
|
|
2.22
|
2.23
|
2.24
|
2.25
|
2.26
|
2.27
|
2.28
|