오버플로 속성 이해

Question

플로팅 된 이미지 목록을 포함하는 div을 만들려고합니다. 그것들의 양 때문에 그들은 용기를 깰 수 있습니다. 컨테이너가 가로로 스크롤되도록합니다. 지금이 순간, 그것은 단지, 나누기 수직으로 쌓아 :

http://jsfiddle.net/tmyie/YUhF9/1/

CSS

.slideshow-container-row-3 { 
    height: 250px; 
    background-color: grey; 
    width: 1025px; 
    overflow: scroll; 
} 

    .img { 
    width: 160px; 
    background-color: orange; 
    height: 250px; 
    margin-left: 10px; 
    float: left; 
} 

.img:first-of-type { 
    margin-left: 0; 
} 

HTML 당신은 float를 사용하는

<div class="slideshow-container-row-3"> 
    <div class="img">.</div> 
    <div class="img">.</div> 
    <div class="img">.</div> 
    <div class="img">.</div> 
    <div class="img">.</div> 
    <div class="img">.</div> 
    <div class="img">.</div> 
    <div class="img">.</div> 
    <div class="img">.</div> 


</div> 

Answer 1

, 대신 그들에게 display: inline-block;을 만들어에 white-space: nowrap;를 사용 래핑 요소가 래핑을 방지합니다.

Demo

.slideshow-container-row-3 { 
    height: 250px; 
    background-color: grey; 
    width: 1025px; 
    overflow: scroll; 
    white-space: nowrap; 
} 

.img { 
    width: 160px; 
    background-color: orange; 
    height: 250px; 
    margin-left: 10px; 
    display: inline-block; 

    /* Use these as well */ 
    vertical-align: top; 
    white-space: normal; 
} 

중요 참고 :은 당신이 다른 사람들이 부모 재산을 상속 .img을 즉 자식 요소 white-space: normal;를 사용합니다. .img에 vertical-align: top;을 사용하고 inline-block은 기본적으로 baseline에 맞춰집니다.

Answer 2

나는 그것이

HTML 섹션을 용기 내에서

<div class="less_container"> 
    <div class="slideshow-container-row-3"> 
     <div class="img">.</div> 
     <div class="img">.</div> 
     <div class="img">.</div> 
     <div class="img">.</div> 
     <div class="img">.</div> 
     <div class="img">.</div> 
     <div class="img">.</div> 
     <div class="img">.</div> 
     <div class="img">.</div>  
    </div> 
</div> 

CSS 판

.less_container{ 
    height: 250px; 
    width: 1025px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
} 

.slideshow-container-row-3 { 
    height: 250px; 
    background-color: grey; 
    width: 1540px; 
    overflow: hidden; 
} 

.img { 
    width: 160px; 
    background-color: orange; 
    height: 250px; 
    margin-left: 10px; 
    float: left; 
} 

.img:first-of-type { 
    margin-left: 0; 
}