div3이 다음 줄로 줄 바꿈되는 것을 방지하고 수직 스크롤 대신 수평을 수행하는 방법이 있습니까?
<table>
<tr>
<td>td1</td>
<td>
<div class="container">
<div class="inner">div1</div>
<div class="inner">div2</div>
<div class="inner">div3</div>
</div>
</td>
</tr>
</table>
table { width: 400px; height: 100px; }
td { width: 50%; border: 1px solid gray; }
div.container { height: 100px; width: 100%; background: red; overflow-x: scroll; }
div.inner { height: 100px; width: 80px; display: block; float: left; background: blue; color: #fff; }
부동 요소를 사용하면 부동 요소가 나머지 공간에 맞지 않으면 다음 줄로 떨어지기 때문에 가로 축에서 스크롤 할 수 없습니다.
따라서 div를 인라인 레벨 블록으로 취급하고 div white-space:nowrap가 다음 줄로 나뉘 지 않도록 설정 해야합니다.
table {
width: 400px;
height: 100px;
table-layout: fixed;
}
td {
width: 50%;
border: 1px solid gray;
}
div.container {
height: 100px;
width: 100%;
background: red;
overflow-x: scroll;
/* added */
white-space: nowrap;
/* to remove space between divs */
font-size: 0;
}
div.inner {
height: 100px;
width: 80px;
background: blue;
color: #fff;
/*display: block; removed */
/*float: left; removed */
/* added */
display: inline-block;
/* because font size in inherited it will be set to 0
but we want text to apear
*/
font-size: 16px;
}<table>
<tr>
<td>td1</td>
<td>
<div class="container">
<div class="inner">div1</div>
<div class="inner">div2</div>
<div class="inner">div3</div>
</div>
</td>
</tr>
</table>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다