如何強制水平滾動取決於內容的大小

我想有一個水平滾動條，如果有必要，通過讓'child'div被逐個添加而不是在父對象被推到下一行時'足夠寬。如何強制水平滾動取決於內容的大小

我的代碼如下。如果你設置.mid的寬度爲：1000px，你會看到我要做的，只有我只希望它和動態生成的孩子一樣寬。

<html> 
<head> 

    <style type="text/css"> 

     .parent { 
      width: 400px; 
      background-color: #666; 
      overflow:scroll; /* cater to the older browsers */ 
      overflow-y:hidden; /* Hide vertical*/ 
     } 

     .mid { 
      background-color: red; 
     } 

     .child { 
      display:inline-block; 
      background-color: #ccc; 
      border: 1px solid black; 
      width: 190px; 
     } 

    </style> 

</head> 
<body> 
    <div class="parent"> 
     <div class="mid"> 
      <div class="child"> 
       I am a child. 
      </div> 
      <div class="child"> 
       I am a child. 
      </div> 
      <div class="child"> 
       I am a child. 
      </div> 
     </div> 
    </div> 

</body> 
</html>

來源

2010-08-31 99miles

您可能需要使用Javascript才能做到這一點。你會接受這樣的解決方案嗎？ – 2010-08-31 03:50:25

人們以前來過這裏，找到了最好/最簡單的方法來做到這一點。看看這裏：

http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

來源

2010-08-31 03:56:50

你可以嘗試使用overflow:auto

來源

2010-08-31 04:00:54 Kieran

還是我誤解了問題 – Kieran 2010-08-31 04:02:52

是的，你有。 ;） – 2010-08-31 04:15:58

哦，很好的澄清你的話。 – Kieran 2010-08-31 04:31:39

哎呀，還不如回答這個問題。你將需要使用Javascript，但是鑑於你已經使用它來動態生成子元素，它不應該是一個問題。

假設你正在使用jQuery，添加這兩條線在生成元素之後：

var child = $('child'); 
$('.mid').width(child.length * child.outerWidth(true));

很抱歉的誤解

利用這一點，但是，將創建另一個問題。當您使用display: inline-block時，每個div後面都會添加一個空白，所以jQuery無法獲得正確的寬度。如果你使用float: left，這不會發生。

來源

2010-08-31 04:05:03

我實際上是在Rails中生成一個循環中的子項，而不是JavaScript。這聽起來像你在說float：left也會解決問題，但那不起作用。 – 99miles 2010-08-31 04:09:46

@ 99miles：不，我的意思是這兩個*一起*會解決你的問題。我通常不喜歡使用'display：inline-block'來獲取排列在一起的元素。 – 2010-08-31 04:15:34

不，他是說在一些動態代碼中添加多少元素，然後設置中間的寬度。＃ – Kieran 2010-08-31 04:31:14

如何強制水平滾動取決於內容的大小

回答

相關問題