가로 스크롤 만 가능한 일련의 사진으로 <div>을 만들려고합니다.CSS 가로 스크롤
다음과 같이 표시되어야합니다. LINK;
그러나 위의 내용은 사진이 포함 된 <div>의 너비를 지정하여 만 얻을 수 있습니다 (따라서 '말로 감싸는'것이 아닙니다). 폭을 넣지 않으면이 모양이됩니다. LINK
이미지가 다를 수 있으므로 고정 너비로 넣지 않도록 CSS를 사용하여 수행 할 수있는 작업은 무엇입니까?
감사
당신은 white-space:nowrap와 display:inline-block를 사용할 수 있습니다. 다음과 같이 쓰기 :
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap
}
.imageDiv img {
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 50px;
cursor: pointer;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
}
검사에게 여기이 링크 를 내가 표시를 변경 : 인라인 블록 http://cssdesk.com/gUGBH
이 링크는 질문에 대답 할 수 있지만 답변의 핵심 부분을 여기에 포함시키고 참조 용 링크를 제공하는 것이 좋습니다. 링크 된 페이지가 변경되면 링크 전용 답변이 유효하지 않게 될 수 있습니다. –
사용이 코드를 가로 스크롤 블록 내용을 생성 할 수 있습니다. 나는 더 뒤로 호환, 테이블 구조를 사용하려고 여기 http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html
<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<!-- more boxes here -->
</div>
</div>
</body>
</html>
에서이 있어요. 확인이 밖으로 Horizontal Scrolling using Tables이 정말 잘 작동
- 감사 –
@sandeep PLZ 내가 jsfiddle에 UR CSS를 사용 나를 도와 지금 어떻게 바닥 글에있는 버튼에 저장되어 아약스 부른 동적으로 일부 데이터 r에 Cuming와를 가정 나는 그 버튼을 윈도우 페이지가 아니라 바닥 글로 스크롤 할 수있다 –
어떻게 이미지를 잡고 좌우로 드래그하여 스크롤을 지원합니까? –