在帶滾動條的容器內水平顯示生成的div

我試圖用滾動條水平顯示動態生成的DIV。可以有n個DIV。原始的HTML結構：在帶滾動條的容器內水平顯示生成的div

HTML（的index.html）

<div style="width:100%;float:left;" id="old"> 
    <div> 
     <h1>First Div</h1> 
     <div id="R1"> 
      <h1>First Div Internal</h1> 
      <a id="R1_index" class="close_page" href="javascript:void(0)">Close</a> 
     </div> 
    </div> 
    <div> 
     <h1>Second Div</h1> 
     <div id="R2"> 
      <h1>Second Div Internal</h1> 
      <a id="R2_index" class="close_page" href="javascript:void(0)">Close</a> 
     </div> 
    </div> 
</div>

我按照這個link的解決方案。但是，當動態DIVs加載結構看起來混亂。它看起來像：

HTML（的index.html）

<div style="width:100%;float:left;" id="old"> 
    <div id="items">Missing Internal Content</div> 
    <div id="items">Missing Internal Content</div> 
</div>

請幫我傢伙。

來源

2013-06-20 Ravi Majithia

設置thw的寬度可能小於100％，50％。所以它佔用了家長寬度的50％？ – Kyle

愚蠢的問題，但是第二個例子是否意味着第一個「解決方案」？它有不同的內容！另外，爲什麼你在這兩個例子中都有重複的ID？ –

我想，問題是容器中的div（在你的例子中是id =「old」）不是彼此相鄰，而是在下面。

如果這是你的問題，您可以添加以下的風格，您的容器：

#old { 
    overflow: auto; 
    white-space: nowrap; 
}

，使子女-div的inline-block的元素：

#old > div { 
    display: inline-block; 
}

那麼就應該按預期工作。看到工作液：

FIDDLE Example

否則請提供什麼樣的問題，到底是一個更好的例子/描述。

來源

2013-06-20 09:49:43

在帶滾動條的容器內水平顯示生成的div

回答

相關問題