如何将这个DIV浮在旁边？

我想漂浮demo.jpg。我用float:left像我这个例子里面的其他div的使用，但它并没有在这种情况下工作：如何将这个DIV浮在旁边？

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>

来源

2015-02-09 rockyraw

我们在谈论什么DIV？ – 2015-02-09 16:16:40

这是期望的结果？没有明确问题陈述的问题对其他读者无益。 – Oriol 2015-02-09 16:19:15

这是最后一个DEMO.JPG – rockyraw 2015-02-09 16:20:02

area课程需要float: left。

见：在你的CSS内联块并将其应用到：http://jsfiddle.net/3f3xmcux/1/

来源

2015-02-09 16:17:00 error

添加float: left;到.area与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>

来源

2015-02-09 16:18:29

更换margin:24px auto 0;您可以使用：显示你divs。这将使它们彼此相邻。

来源

2015-02-09 16:29:59 Creaven

如何将这个DIV浮在旁边？

回答

相关问题