Question

我试图让div浮动到右边但是当应用float：right并使浏览器的页面大小变小时div会在前一个div之下。

https://jsfiddle.net/Crystalwolf/bku2f08c/1/

HTML

<div id="container">
  <div id="navbar-container">
    <div id="mainlogo">
    </div>
    <div id="sublogo">
      This is a subtitle test
    </div>
    <div id="navbutton-container">
      <div class="navbutton navcurrent">
        Home
      </div>
      <div class="navbutton">
        About
      </div>
      <div class="navbutton">
        Web Design
      </div>
      <div class="navbutton">
        Programming
      </div>
      <div class="navbutton">
        Graphic Design
      </div>
      <div class="navbutton">
        Contact
      </div>
    </div>
  </div>
  <div id="carousel">
  </div>
</div>

CSS

#container {
  width: 100%;
  height: 100%;
}

#navbar-container {
  position: fixed;
  background-color: white;
  width: 100%;
  height: 100px;
  padding: 15px;
  color: white;
  padding-left: 60px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
  min-width: 1200px;
  overflow: hidden;
  white-space: nowrap;
}

#mainlogo {
  color: #373c40;
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  float: left;
  display: inline-block;
  padding-left:50px;
}

#sublogo {
  color: #373c40;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  float: left;
  padding: 25px;
  display: inline-block;
}

#carousel {
  background-image: url("http://3nacu.com/unique/images/stars.png");
  width: 100%;
  height: 500px;
}

#navbutton-container {
  margin-top: 10px;
  background-color: white;
  height: 50px;
  padding-left: 50px;
  float: right;                  //THIS SPECIFIC FLOAT RIGHT
  display: inline-block;
  padding-right:50px;
}

.navbutton {
  display: inline-block;
  vertical-align: top;
  height: 50px;
  padding: 15px;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
  color: #373c40;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
}

.navbutton:hover {
  background-color: #373c40;
  color: white;
}

.navcurrent {
  background-color: #B39EB5;
  color: white;
}

例如，在结果上将浏览器设置为1920，并且它全部在一行上。一旦你使它变得相当短，它就会进入前一个div，而不是只启用一个水平滚动条。

Answer 1

这是预期的行为，如果容器内没有足够的空间，浮动元素将会中断。如果你想要一个可滚动的溢出，你需要给容器一个固定的宽度（例如1200px而不是100%）足够大以适应所有浮动元素。

为什么在申请浮动时：对;在这个特定的情况下，它会导致div在前一个div下？

1 个答案: