HTML CSSは、画面の幅の横に並べて、

Question

私の目標は、width = 100vwとdivを置くことです、そのdivは、例えば300pxの幅を持つ2番目のdivがあるはずです（2番目のdivが画面外になるように） 。私はフロート、インライン表示などで多くのことを試しましたが、今はもうアイデアはありません。ここで

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

は、次の2つの内側の要素に親要素のwhite-space: nowrapとdisplay: inline-blockを使用することができます

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

Answer 1

のコード例とフィドルです。また、多分あなたはそれが第二のdivが画面の外にあるこの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/

のようになります。vertical-align: topを追加したいです。あなたはそれを見たい場合は、コンテナの位置または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/

あなたは何秒div

を参照するには右にscollすることができます変更後：

私は、だから私は十分な広さの両方のコンテナを保持し、コンテナのdisplayinline-blockに設定するために身体を作っ

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

を追加しました。 vertical-align: top;を省略することができます。コンテナはベースラインで予告されます（内容によって異なる場合があります）