HTML CSS make divs Seite an Seite, außerhalb der Bildschirmbreite

Question

Mein Ziel ist es, div mit width = 100vw, nach diesem div sollte zweiten div mit Breite zum Beispiel 300px (so dass zweite div sollte außerhalb des Bildschirms sein) . Ich habe viele Dinge mit float, display inline und so weiter probiert, jetzt habe ich keine Ideen mehr.

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

Hier Geige mit Beispielcode

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

Answer 1

Sie white-space: nowrap auf Elternelement und display: inline-block auf zwei inneren Elemente verwenden können. Auch vielleicht möchten Sie vertical-align: top so hinzufügen, um es wie dieses 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/

Die zweite div aussehen wird, ist außerhalb des Bildschirms. Sie müssen entweder seine Position oder die overflow:hidden Eigenschaft auf dem Container ändern, wenn Sie es sehen möchten.

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

Hier ist meine Gabel Ihrer Geige: https://jsfiddle.net/nyzvbvo7/1/

Sie können nach rechts Scoll die zweite div

, um zu sehen, was ich geändert:

Ich

hinzugefügt

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

Also habe ich den Körper breit genug, um die beiden Behälter zu halten gemacht und stellen Sie den Behälter des display-inline-block. vertical-align: top; kann weggelassen werden, die Container werden an ihrer Grundlinie (die je nach Inhalt variieren kann) algned