콘텐츠를 div 내에서 가로로 스크롤하도록 만들기

콘텐츠를 div 내에서 가로로 스크롤하도록 만들기

---

이미지를 표시하고 클릭하면 라이트 박스에서 열 수있는 부서가 있습니다. 나는 그들을 왼쪽으로 떠서 인라인으로 표시했습니다. 오버플로 -x를 스크롤하도록 설정하지만 행 공간이 충분하지 않으면 여전히 이미지를 아래에 놓습니다. 인라인으로 만들고 필요할 때 가로 스크롤을 표시하고 싶습니다.

참고 : 내부 이미지의 구조를 변경할 수 없습니다. 앵커 내부의 이미지 여야합니다. 내 라이트 박스는 그렇게해야합니다.

HTML :

<div id="myWorkContent">
    <a href="assets/work/1.jpg"><img src="assets/work/1.jpg" height="190" /></a>
    <a href="assets/work/2.jpg"><img src="assets/work/2.jpg" height="190" /></a>
    <a href="assets/work/3.jpg"><img src="assets/work/3.jpg" height="190" /></a>
    <a href="assets/work/4.jpg"><img src="assets/work/4.jpg" height="190" /></a>
    <a href="assets/work/5.jpg"><img src="assets/work/5.jpg" height="190" /></a>
    <a href="assets/work/6.jpg"><img src="assets/work/6.jpg" height="190" /></a>
</div><!-- end myWorkContent -->

CSS :

#myWorkContent{
    width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
}
#myWorkContent a {
    display: inline;
    float:left
}

나는 이것이 매우 기본적인 것이라는 것을 알고 있지만 그것을 할 수 없습니다. 무엇이 잘못되었는지 모르겠습니다.

---

HTML에서 다음과 같을 수 있습니다.

<div class="container-outer">
   <div class="container-inner">
      <!-- Your images over here -->
   </div>
</div>

이 스타일 시트 사용 :

.container-outer { overflow: scroll; width: 500px; height: 210px; }
.container-inner { width: 10000px; }

다음과 같이 내부 컨테이너 너비를 계산하는 지능형 스크립트를 만들 수도 있습니다.

$(document).ready(function() {
   var container_width = SINGLE_IMAGE_WIDTH * $(".container-inner a").length;
   $(".container-inner").css("width", container_width);
});

---

float: left에서 제거 하고 외부에 a추가 white-space: nowrap하면div

#myWorkContent{
    width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
#myWorkContent a {
    display: inline;
}

this should work for any size or amount of images..

or even:

#myWorkContent a {
    display: inline-block;
    vertical-align: middle;
}

which would also vertically align images of different heights if required

test code

---

The problem is that your imgs will always bump down to the next line because of the containing div.

In order to get around this, you need to place the imgs in their own div with a width wide enough to hold all of them. Then you can use your styles as is.

So, when I set the imgs to 120px each and place them inside a

div#insideDiv{
    width:800px;
}

it all works.

Adjust width as necessary.

See http://jsfiddle.net/jasongennaro/8YfRe/

---

Same as what clairesuzy answered, except you can get a similar result by adding display: flex instead of white-space: nowrap. Using display: flex will collapse the img "margins", in case that behavior is preferred.

---

@marcio-junior's answer (https://stackoverflow.com/a/6497462/4038790) works perfectly, but I wanted to explain for those who don't understand why it works:

@a7omiton Along with @psyren89's response to your question

Think of the outer div as a movie screen and the inner div as the setting in which the characters move around. If you were viewing the setting in person, that is without a screen around it, you would be able to see all of the characters at once assuming your eyes have a large enough field of vision. That would mean the setting wouldn't have to scroll (move left to right) in order for you to see more of it and so it would stay still.

However, you are not at the setting in person, you are viewing it from your computer screen which has a width of 500px while the setting has a width of 1000px. Thus, you will need to scroll (move left to right) the setting in order to see more of the characters inside of it.

I hope that helps anyone who was lost on the principle.

ReferenceURL : https://stackoverflow.com/questions/6497373/make-content-horizontally-scroll-inside-a-div