我的div不會留在我的div容器中

我在桌子上有幾個div，我想讓我的一個div讓它不會離開頁面。我想在容器div上添加一個滾動條。而是，我的股利仍是我的頁面熄滅：我的div不會留在我的div容器中

<table style="width: 100%;"> 
    <tr> 
     <td> 
      //some stuff 
     </td> 
     <td> 
      <div id="container" style="overflow-x: scroll;"> 
       <div style="width: 1100px;"> div containing chart1 </div> 
       <div style="width: 1100px;"> div containing chart2 </div> 
      </div> 

     </td> 
    </tr> 
</table>

JSFIDDLE

來源

2014-07-27 roshambo

是你談論到底是哪DIV？包含文本'包含chart1和2'的div的div？ –

請發佈您的完整html和css –

是的，包含chart1和chart2的兩個div越來越被推下屏幕 – roshambo

首先，獲得在容器上擺脫overflow-x:scroll。然後裏面每一個的div添加額外的div要滾動：

<div id="container"> 
    <div class="scroll"> 
     <div class="chart">div containing chart1</div> 
    </div> 
    <div class="scroll"> 
     <div class="chart">div containing chart2</div> 
    </div> 
</div>

現在你可以給「滾動」的div什麼（比如200像素）與overflow-x:scroll的寬度，並設置內部「圖表」的div到width:1100px：

.scroll { 
    width:200px; 
    overflow-x:scroll; 
} 
.chart { 
    width:1100px; 
}

這裏有一個jsFiddle

UPDATE：

Tom是對的，你可以將一個百分比寬度應用到「滾動」div。只要確保你添加overflow:hidden到主體元素，否則該表的隱藏部分將溢出的頁面：

body{ 
    overflow:hidden; 
} 
.scroll { 
    width:20%; 
    overflow-x:scroll; 
}

更新jsFiddle

來源

2014-07-27 02:40:23 symlink

就像你的文本的一個補充：這裏的關鍵點是，你需要定義父div的（最大）寬度以使滾動成爲可能。如果你沒有這個設置，父div將被調整大小。 – Tom

@Tom很好，謝謝你的補充。 – symlink

感謝有識之士。但是，我真的不想設置我的父div的寬度。如果用戶有大屏幕，我不希望他們的div仍然很小。有沒有一種方法可以使用百分比從我的表格中定義我的寬度？ – roshambo

-1

的問題是，你已經對細胞中指定的寬度比需要更多的（設置爲較低的值，也嘗試使用一些CSS來指定表格本身的高度和寬度）。

所以，這裏的寬度：

<div style="width: 1100px;"> div containing chart1 </div>

應少，這裏是更新的小提琴：

Updated Fiddle

來源

2014-07-27 02:32:05

爲什麼downvote，確切地說？ –

這不是我低估了你的答案，但我想這是因爲你的回答不太對。問題不是孩子div的大小太大，問題在於父div中缺少'width'設置。請參閱符號鏈接的答案。 – Tom

@Tom好的，謝謝你的糾正...... –

我的div不會留在我的div容器中

回答

相關問題