如何讓一個div從左至右

因此，繼承人的CSS的股利，應該是滾動如何讓一個div從左至右

.form-holder{ 
     padding-left: 20px; 
     width: auto; 
     background: ; 
     overflow: auto; 
     max-height: 300px; 
     padding-bottom: 30px; 

    }

每個我上傳的圖片預覽可用，我希望這些圖像在水平方向不垂直觀察時

滾動。所以我想在div要滾動左到右

繼承人的小提琴：http://jsfiddle.net/roowako/AZvuL/

來源

2014-04-09 Ruther Bergonia

您可以檢查此插件滾動http://jquerytools.org/demos/scrollable/ – user2167382

我假定這是您要創建什麼：

FIDDLE

HTML：

<div class="form-holder"> 
    <div class="img_wrap"> 
     <img src="http://lorempixel.com/output/nature-q-c-280-280-4.jpg" /> 
     <img src="http://lorempixel.com/output/sports-q-c-280-280-2.jpg" /> 
     <img src="http://lorempixel.com/output/city-q-c-280-280-9.jpg" /> 
     <img src="http://lorempixel.com/output/fashion-q-c-280-280-1.jpg" /> 
    </div> 
</div>

CSS：

.form-holder { 
    padding-left: 20px; 
    width: 300px; 
    background: grey; 
    overflow: auto; 
    max-height: 300px; 
    padding-bottom: 30px; 
} 
.img_wrap { 
    width: 1120px; /*width of all images */ 
} 
.form-holder img { 
    float:left; 
}

來源

2014-04-09 08:38:03

是的這樣的事情。但圖像通過JavaScript添加。繼承人我的小提琴http://jsfiddle.net/roowako/AZvuL/ –

@Ruther好了，所以你將不得不使用你的腳本來計算插入'.img_wrap'圖像的數量，這樣你就可以計算他們的總和並設置在'.img_wrap'上，所以它可以包含它們。 –

我看到謝謝先生 –

限制你的div的width，如果你想水平滾動

.form-holder{ 
     padding-left: 20px; 
     width: 300px; 
     background: ; 
     overflow: auto; 
     max-height: 300px; 
     padding-bottom: 30px; 

    }

來源

2014-04-09 08:18:48 Thomas

小提琴：http://jsfiddle.net/s6AsC/

您必須限制尺寸並將overflow-x設置爲auto

.form-holder{ 
     padding-left: 20px; 
     height: 300px; /* if you want to set the height */ 
     width: 300px; 
     background: ; 
     overflow-y: hidden; 
     overflow-x: auto; 
     max-height: 300px; 
     padding-bottom: 30px; 

    }

來源

2014-04-09 08:23:43 naoxink

繼承人我的小提琴先生http://jsfiddle.net/roowako/AZvuL/ –

使用jQuery和Mouse Wheel Plugin綁定您希望水平滾動的div上的mousewheel事件。

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.mousewheel.js"></script> 
<script> 
$(document).ready(function() { 
$('#divId').mousewheel(function(e, delta) { 
    this.scrollLeft -= (delta * 30); 
    e.preventDefault(); 
}); 
}); 
</script>

你可以改變（在我的例子30）乘以delta數來設定像素數上的每個滾動移動。

來源

2014-04-09 08:25:11

如何讓一個div從左至右

回答

相關問題