如何讓兩個div並排坐在一起，如果容器太窄，隱藏溢出

我試圖讓兩個div總是並排放置，即使容器太小。我想隱藏右手div的溢出，但似乎無法實現這一點。當我調整瀏覽器的大小以使滾動條出現在主體上時，右側的div向下移動。如何讓兩個div並排坐在一起，如果容器太窄，隱藏溢出

這裏是我的HTML至今：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
body { 
    margin: 0; 
    padding: 0; 
    min-width: 800px; overflow: auto; 
}  

span { display: block; } 

#div-outer { 
    width: 95%; 
    height: 300px; 
    padding: 2px; 
    border: 4px solid green; 
    display: block; 
} 

#div-box-left { 
    border: 3px solid black; 
    width: 250px; 
    height: 250px; 
    float: left; 
    display: inline-block; 
} 

#div-box-right { 
    border: 3px solid red; 
    height: 250px; 
    margin-left: 10px; 
    overflow: hidden; 
    float: left; 
    display: inline-block; 
} 

#tbl { 
    background: yellow; 
    border: 3px solid blue; 
} 

     </style> 
    </head> 
    <body> 
     <span>Wide div to contains two divs</span> 
     <div id="div-outer"> 
      <div id="div-box-left"> 
       Left div with a width of 250px 
      </div> 
      <div id="div-box-right"> 
       <span>This contains a table but is too wide to fix - I want the table's overflow hidden</span> 
       <table id="tbl"> 
        <tr> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
         <td>Column</td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </body> 
</html>

來源

2011-12-09 Craig Shearer

您可能需要另一個div，或者你可以應用樣式.outer在身上：

Simplified example

CSS：

.outer{width: 600px; overflow:hidden; border:2px solid lightblue; padding:10px;} 
.innerwrap{width:9999px;} 
.inner{width:400px; height:200px; border:2px solid salmon; float:left;}

HTML：

<div class="outer"> 
<div class="innerwrap"> 
    <div class="inner"></div> 
    <div class="inner"></div> 
</div>

Your example, fixed.

來源

2011-12-09 01:17:24 bookcasey

真棒 - 感謝！ –

重新排序divs：

<div id="div-outer"> 
    <div id="div-box-right"><div> 
    ... 
    </div></div> 
    <div id="div-box-left"> 
    ... 
    </div> 
</div>

和改變CSS：

#div-box-left { 
    border: 3px solid black; 
    width: 250px; 
    height: 250px; 
    float: left; 
    margin-left: -100%; 
} 
#div-box-right { 
    float: left; 
    width: 100%; 
} 
#div-box-right > div { 
    border: 3px solid red; 
    height: 250px; 
    margin-left: 10px; 
    overflow: hidden; 
    margin-left: 260px; 
}

你可以看到這個工作here。

來源

2011-12-09 01:21:08

我發現這下面的代碼是非常有用的，也許這將幫助任何人誰上臺搜索，想要快速的結果 -

<html> 
<body> 
    <div style="width: 50%; height: 50%; background-color: green; float:left;"></div> 
    <div style="width: 50%; height: 50%; background-color: blue; float:right;"></div> 
    <div style="width: 100%; height: 50%; background-color: red; clear:both"></div> 
</body> 
</html>

來源

2012-07-11 13:56:22 axs

我知道這是舊的文章，但現在要做到這一點的最好辦法是使用flex的顯示屬性。除顯示屬性之外的所有樣式僅用於說明div的位置。

<div id="div-outer"> 
 
    <div id="div-box-right"> 
 
    ... 
 
    </div> 
 
    <div id="div-box-left"> 
 
    ... 
 
    </div> 
 
</div> 
 
<style> 
 
    #div-outer { 
 
    display: flex; 
 
    border: thin solid red; 
 
    } 
 
    
 
    #div-outer div { 
 
    border: thin solid black; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 5%; 
 
    } 
 
</style>

來源

2017-07-20 13:43:17 nixin72

如何讓兩個div並排坐在一起，如果容器太窄，隱藏溢出

回答

相關問題