Question

我想要漂浮demo.jpg。我使用了float:left，就像我在本例中使用的其他div一样，但在这种情况下它并不起作用：

HTML：

＆＃13;

#container {
  border: 1px solid #DCD7D4;
  width: 810px;
  background-color: #FFF;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  overflow: hidden
}
.area {
  margin: 24px auto 0;
  width: 260px;
  background-color: #E8F8FF;
  height: 200px
}
.area2 {
  border-radius: 4px;
  float: left;
  margin-left: 30px;
  margin-top: 28px;
  padding: 3px;
  background-color: #FDFDB5
}
.center {
  width: 150px;
  padding-top: 11px;
  margin-left: 150px
}
.area3 {
  background: yellow;
  width: 40px;
  height: 40px;
  float: left;
  margin-left: 0;
  position: relative
}
.area1 {
  font-size: .9em;
  margin-left: 36px;
  position: absolute;
  margin-top: 8px;
  letter-spacing: -.08em
}
.demo {
  float: left;
  background-color: #FDFDB5
}

＆＃13;

<div id="container">
  <div class="area">
    <div class="area1">aaa:</div>
    <div class="area2">bbb</div>
    <div class="center">
      <div class="area3"></div>
    </div>
  </div>
  <div class="demo">
    <img src="demo.jpg" width="214" height="151" alt="" />
  </div>
</div>

＆＃13;

Answer 1

area课程需要float: left。

请参阅：http://jsfiddle.net/3f3xmcux/1/

Answer 2

将float: left;添加到.area并将margin:24px auto 0;替换为margin-left:24px;

#container{border:1px solid #DCD7D4;width:810px;background-color:#FFF;position:relative;margin-left:auto;margin-right:auto;margin-top:0;overflow:hidden}.area{float:left;margin-left:24px;width:260px;background-color:#E8F8FF;height:200px}.area2{border-radius:4px;float:left;margin-left:30px;margin-top:28px;padding:3px;background-color:#FDFDB5}.center{width:150px;padding-top:11px;margin-left:150px}.area3{background:yellow;width:40px;height:40px;float:left;margin-left:0;position:relative}.area1{font-size:.9em;margin-left:36px;position:absolute;margin-top:8px;letter-spacing:-.08em}.demo{float:left;background-color:#FDFDB5}

<div id="container">
  <div class="area">
    <div class="area1">aaa:</div>
    <div class="area2">bbb</div>
    <div class="center">
      <div class="area3"></div>
    </div>
  </div>
  <div class="demo"><img src="demo.jpg" width="214" height="151"  alt=""/></div>
</div>

Answer 3

您可以使用：显示：你的CSS中的内联块并将其应用于你的div。这将使它们彼此相邻。

如何将这个DIV漂浮在其他人旁边？

3 个答案: