Question

我有以下HTML＆amp; CSS。我想知道为什么第二个盒子没有漂浮到第一个盒子的侧面。据我所知，如果一个特定宽度的盒子浮动，那么其他div将浮动到浮动盒子/ div的左边，直到没有更多空间容纳在同一个线盒上。

＆＃13;

   #content-wrapper {
     border: 1px solid blue;
     width: 100%
   }
   .first-box {
     width: 450px;
     border: 1px solid red;
     float: left;
   }
   .first-box h2 {
     background: url(img/top-menu-bg.jpg) no-repeat;
     line-height: 45px;
     padding-left: 15px;
     margin-bottom: 15px;
   }
   .second-box {
     width: 5%;
     border: 1px solid red;
   }
   </style>

＆＃13;

<div id="content-wrapper">
  <div class="first-box">
    <h2>Welcome to My Engg.</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="second-box">
    <p>Some Side bar text</p>
  </div>
</div>

＆＃13;

感谢

Answer 1

您需要设置display：inline-block

<强> CSS

#content-wrapper{
  border:1px solid blue;
  width:100%;
  display:block;
  overflow:hidden;
}

.first-box {
  width:450px;
  border:1px solid red;
  float:left;
  display:inline-block;
}

.first-box h2{
  background:url(img/top-menu-bg.jpg) no-repeat;
  line-height:45px; 
  padding-left:15px; 
  margin-bottom:15px;
  display:inline-block;
 }

.second-box{
  width:5%;
  border:1px solid red;
  display:inline-block; //HERE YOUR FIX
 }

<强> DEMO HERE

Answer 2

您需要向要浮动的任何其他项目添加一个浮动：

见这里：http://jsfiddle.net/lharby/bjgpsm1n/

我刚刚补充道：

 .second-box{float:left /* other css */}

Answer 3

有很多方法可以解决这个问题。

最简单的方法是将float: left添加到课程.second-box

工作示例的Codepen链接：LINK TO EXAMPLE

Floats有时会让你遇到类似这样的问题。

您是否考虑过使用display: inline-block？

CSS浮动：为什么第二个框没有移到浮动框的左侧

3 个答案: