조회 : 178
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) 명령어 |
[공지] 기술 게시판 |
일 |
월 |
화 |
수 |
목 |
금 |
토 |
---|---|---|---|---|---|---|
4.28
|
4.29
|
4.30
|
5.1
|
5.2
|
5.3
|
5.4
|
5.5
|
5.6
|
5.7
|
5.8
|
5.9
|
5.10
|
5.11
|
5.12
|
5.13
|
5.14
|
5.15
|
5.16
|
5.17
|
5.18
|
5.19
|
5.20
|
5.21
|
5.22
|
5.23
|
5.24
|
5.25
|
5.26
|
5.27
|
5.28
|
5.29
|
5.30
|
5.31
|
6.1
|