HTML CSS使div並排，超出屏幕寬度

Question

我的目標是把div與寬度= 100vw，之後div應該有第二個div的寬度爲例如300px（以便第二個div應該在屏幕外） 。我用浮球嘗試了很多東西，內聯展示等等，現在我沒有更多的想法。

<div id="div1"></div> 
<div id="div2"></div> 

這裏是撥弄示例代碼

https://jsfiddle.net/kg5ea4sc/5/

Answer 1

可以在兩個內部元件使用white-space: nowrap父元素和display: inline-block。另外，也許你想添加vertical-align: top所以它看起來像這樣Fiddle

.element { 
 
    white-space: nowrap; 
 
} 
 

 
#div1{ 
 
    background: green; 
 
    display: inline-block; 
 
    width:100vw; 
 
    height: 80px; 
 
} 
 

 
#div2{ 
 
    background: red; 
 
    display: inline-block; 
 
    width:300px; 
 
    height: 100px; 
 
}

<div class="element"> 
 
    <div id="div1"></div> 
 
    <div id="div2"></div> 
 
</div>

Answer 2

https://jsfiddle.net/guanzo/kg5ea4sc/18/

第二格是屏幕之外。如果您想查看它，則必須操縱它的位置或容器上的overflow:hidden屬性。

HTML

<div id="container"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
</div> 

CSS

#div1{ 
    background: green; 
    width:100vw; 
    height: 80px; 
} 

#div2{ 
    background: red; 
    width:300px; 
    height: 100px; 
} 

div{ 
    display:inline-block; 
} 

#container{ 
    width:100vw; 
    white-space:nowrap; 
    overflow:hidden; 
} 

Answer 3

這是我對你的提琴的叉：https://jsfiddle.net/nyzvbvo7/1/

可以scoll向右看第二div

我已更改：

我加

body { 
    width: calc(100vw + 300px); 
    margin: 0; 
} 
#div1, #div2 { 
     display: inline-block; 
     vertical-align: top; 
} 

所以我做了身體寬度足以容納兩個容器，並設置容器的display到inline-block。 vertical-align: top;可以省略，集裝箱將在其基準線上（可以根據內容而變化）