Question

我在一个容器中有3个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 Codepen问题示例

Answer 1

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

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

看看这个作为进一步参考：

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

Answer 2

以下是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>

向左浮动div 100％宽度

2 个答案: