반응형
가로 스크롤 만 사용하는 Div
많은 열이있는 테이블을 포함하는 고정 너비 DIV가 있으며 사용자가 DIV 내에서 테이블을 가로로 스크롤 할 수 있어야합니다.
이것은 IE6 및 IE7에서만 작동해야합니다 (내부 클라이언트 응용 프로그램).
다음은 IE7에서 작동합니다.
overflow-x: scroll;
누구든지 IE6에서도 작동하는 솔루션을 도울 수 있습니까?
해결책은 상당히 간단합니다. 테이블의 셀 너비에 영향을주지 않도록 white-space를 해제 합니다 . 수평 스크롤바를 확보하기 위해 overflow-x를 켭니다 . 그리고 그게 다입니다.
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
여기 또는 아래 애니메이션에서 최종 결과를 볼 수 있습니다 . 테이블이 컨테이너의 높이를 결정하는 경우 명시 적으로로 설정하지 않아도 overflow-y됩니다 hidden. 그러나 그것도 선택 사항임을 이해하십시오.
선택한 답변을 얻을 수 없었지만 약간의 연구 끝에 가로 스크롤 div가 white-space: nowrapCSS에 있어야 함을 발견했습니다 .
다음은 완전한 작업 코드입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly{
width: 1000px;
height: 190px;
overflow: auto;
overflow-y: hidden;
margin: 0 auto;
white-space: nowrap
}
img{
width: 300px;
height: 150px;
margin: 20px 10px;
display: inline;
}
</style>
</head>
<body>
<div id='scrolly'>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
</div>
</body>
</html>
overflow-x: scroll;
overflow-y: hidden;
편집하다:
나를 위해 작동합니다.
<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
<div style='width:400px;height:250px'></div>
</div>
가로 스크롤의 경우 다음 두 속성에 유의하십시오.
overflow-x:scroll;
white-space: nowrap;
작업 링크보기 : 클릭하세요
HTML
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
CSS
div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}
이 시도:
HTML :
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
CSS :
.container {
width: 200px;
height: 100px;
display: flex;
overflow-x: auto;
}
.item {
width: 100px;
flex-shrink: 0;
height: 100px;
}
공백 : nowrap; 속성은 텍스트 줄 바꿈을 허용하지 않습니다. 예를 보려면 여기를 참조하십시오 : https://codepen.io/oezkany/pen/YoVgYK
참고 URL : https://stackoverflow.com/questions/443700/div-with-horizontal-scrolling-only
반응형
'code' 카테고리의 다른 글
| 버튼을 누를 때 활동이 두 번로드되는 것을 방지하는 방법 (0) | 2020.10.13 |
|---|---|
| MySQL-이 버전의 MySQL은 아직 'LIMIT & IN / ALL / ANY / SOME 하위 쿼리를 지원하지 않습니다. (0) | 2020.10.13 |
| ImageMagick 설치 확인 (0) | 2020.10.13 |
| centos : 동일한 유닉스 소켓으로 이미 실행중인 다른 MySQL 데몬 (0) | 2020.10.13 |
| AppBarLayout 위젯 android 아래 그림자 제거 (0) | 2020.10.13 |