HTML CSS在屏幕宽度之外并排显示div

Question

My goal is to put div with width=100vw, after that div there should be second div with width for example 300px (so that second div should be out of screen). I tried many things with float, display inline and so on, now I don't have any more ideas.

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

Here is fiddle with example code

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

Answer 1

You can use white-space: nowrap on parent element and display: inline-block on two inner elements. Also maybe you want to add vertical-align: top so it will look like this 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/

The second div is outside of the screen. You'll have to manipulate either it's position or the overflow:hidden property on the container if you want to see it though.

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

Here is my fork of your fiddle: https://jsfiddle.net/nyzvbvo7/1/

You can scoll to the right to see the second div

What I changed:

I added

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

So I made the body wide enough to hold both containers and set the container's display to inline-block . vertical-align: top; can be left out, the the containers will be algned at their baseline (which can vary depending on the content)