Html 浮动左div 100%宽度

我在一个容器中有3个div，每个div的宽度设置为100%。如果我把它们都放在左边，它们就会叠在一起。我想让他们做的是水平地互相浮动。将div的宽度更改为固定宽度效果良好。我怎样才能做到这一点？谢谢你的帮助和时间

html

---

codepen问题示例

如果我正确理解您要查找的内容，您要查找的内容是在父div中使用flex显示：

  #slide-container {
  height:100%;
  position:relative;
  left:0;
  white-space:nowrap;
  font-size:0;
  display: flex;
}

请查看以下内容以供进一步参考：

---

这里使用了

flex

和

overflow-x

来达到您想要的效果。您可以根据需要进一步进行更改-

body，html{
保证金：0；
填充：0；
溢出：无；
}
#滑动容器{
高度：400px；
宽度：100%；
显示器：flex；
柔性包装：无包装；
溢出-x：自动；
}
.幻灯片{
高度：400px；
最小宽度：100%；
}
#卷轴{
最小宽度：100%；
高度：400px；
背景颜色：蓝色；
位置：相对位置；
溢出：隐藏；
}

您想让div水平堆叠并填满整个空间吗？请解释您想要实现什么。是的，每个div都是容器的100%，我希望它们水平堆叠。我已经更新了画笔以显示问题，如果您将子元素的宽度设置为100%，那么它将占用父容器宽度的100%空间。但是，如果您将每个子容器的宽度设置为100%，则它们将溢出父容器。是溢出将被隐藏。我已将滑动容器显示设置为flex的代码笔更新。问题是div的大小不再是父容器的100%#我还将隐藏溢出，因此其他2个div将不会显示，除非我定位#使用left:或right:将容器向左或向右滑动：我打开了你的代码笔，因此，为了清楚起见，你不想在屏幕上看到任何蓝色，你想让你的三个div均匀地覆盖屏幕？是的，如果你给#slide container添加负的左值，你应该看到橙色而不是蓝色好的，只需删除你的左值：-20px，然后它就完全覆盖了父容器。通过添加-20，您并没有改变它的大小，您只是在移动它。我需要将.slide设置为100%宽度，以便它可以拉伸以适合滚动条。不过谢谢你，你还有其他想法吗？如果你将宽度设置为100%，那么你将无法实现水平堆叠效果。您是否希望所有

.slide

都能均匀拉伸，以适合外部

幻灯片容器

，这样您就可以看到三个相等的部分？100%宽度的唯一方法是使用固定大小？我希望每个div的大小与#滚动条相同，并水平堆叠

body, html {
  margin:0;
  padding:0;
}

#scroller {
  min-width:100%;
  height:400px;
  background-color:blue;
  position:relative;
  overflow:hidden;
}

#slide-container {
  height:100%;
  position:relative;
  left:0;
  white-space:nowrap;
  font-size:0;
}

.slide {
  height:100%;
  width:100%;    
  margin:0;
  padding:0;
  float:left;
}

  #slide-container {
  height:100%;
  position:relative;
  left:0;
  white-space:nowrap;
  font-size:0;
  display: flex;
}