float left div 100% width

Question

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

html

<div id="scroller">
<div id="slide-container">
<div class="slide" style="background-color:yellow;">
</div>

<div class="slide" style="background-color:orange;">
</div>

<div class="slide" style="background-color:red;">
</div>

</div>
</div>

css

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;
}

https://codepen.io/justinhdevelopment/pen/bGexaJy问题的代码笔示例

Answer 1

以下是flex和overflow-x的一些用法，以达到您想要的效果。您可以根据需要进一步进行更改-

body, html {
margin:0;
padding:0;
overflow: none;
}
#slide-container {
height:400px;
width: 100%;
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
}
.slide {
height:400px;
min-width:100%;
}
#scroller {
min-width:100%;
height:400px;
background-color:blue;
position:relative;
overflow:hidden;
}

<div id="scroller">
<div id="slide-container">
<div class="slide" style="background-color:yellow;">
</div>

<div class="slide" style="background-color:orange;">
</div>

<div class="slide" style="background-color:red;">
</div>

</div>
</div>

Answer 2

如果我能正确理解您想要的内容，那么您想要的是在父div中使用灵活显示：

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

看看这个以供进一步参考：

https://www.w3schools.com/css/css3_flexbox.asp