조회 : 371
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) 명령어 |
[공지] 기술 게시판 |
일 |
월 |
화 |
수 |
목 |
금 |
토 |
---|---|---|---|---|---|---|
7.27
|
7.28
|
7.29
|
7.30
|
7.31
|
8.2
|
|
8.3
|
8.4
|
8.5
|
8.8
|
8.9
|
||
8.10
|
8.11
|
8.12
|
8.14
|
8.15
|
8.16
|
|
8.17
|
8.18
|
8.20
|
8.21
|
8.22
|
8.23
|
|
8.24
|
8.25
|
8.26
|
8.27
|
8.28
|
8.29
|
8.30
|
8.31
|
9.1
|
9.2
|
9.3
|
9.4
|
9.5
|
9.6
|