조회 : 355
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) 명령어 |
[공지] 기술 게시판 |
일 |
월 |
화 |
수 |
목 |
금 |
토 |
---|---|---|---|---|---|---|
6.29
|
6.30
|
7.1
|
7.2
|
7.3
|
7.5
|
|
7.6
|
7.7
|
7.8
|
7.9
|
7.10
|
7.11
|
7.12
|
7.13
|
7.14
|
7.15
|
7.16
|
7.17
|
7.18
|
7.19
|
7.20
|
7.21
|
7.22
|
7.23
|
7.24
|
7.25
|
7.26
|
7.27
|
7.28
|
7.29
|
7.30
|
7.31
|
8.1
|
8.2
|