html - 如何将此 DIV float 到其他 DIV 旁边？

Question

我想 float demo.jpg。我使用了 float:left 就像我在这个例子中使用其他 div 一样，但它在这种情况下不起作用:

see fiddle

HTML:

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

<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 1

area 类需要float: left。

参见:http://jsfiddle.net/3f3xmcux/1/