Question

我的目标是将div设置为宽度= 100vw，在该div之后应该有第二个div宽度，例如300px（因此第二个div应该在屏幕之外）。我尝试了很多东西浮动，显示内联等等，现在我没有更多的想法。

这里是示例代码

的小提琴

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/

第二个div位于屏幕之外。如果你想看到它，你必须操纵它的位置或容器上的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

我改变了什么：

我添加了

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

所以我让身体足够宽，以容纳两个容器并将容器display设置为inline-block。可以省略vertical-align: top;，容器将在其基线处进行归一化（根据内容可能会有所不同）

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

3 个答案: