浮点不在CSS中工作

Question

我像这样内联CSS。但浮动不起作用。

<div style='clear:both'>
    <div style='display:block;float:right;margin:10px;width:200px'>
        <img src = 'http://knowafest.co.in/images/logo.png' height='200px' width='200px'/>          
    </div>
</div>

我测试了此页面中的代码 - http://test-knowafest.blogspot.in/2013/03/fuseout-2013-government-engineering.html

您可以看到帖子标题旁边的图片。图像没有浮动。我尝试了几种风格的参数组合，但它没有用。你能告诉我哪里出错了吗？

现在看起来如下

====================================

但我希望如下所示。

Answer 1

以下是 WORKING SOLUTION

守则：

<div id="post-body-3682190942132900250" class="post-body entry-content">
    <div style="clear: both; overflow: hidden; display: inline; background: none repeat scroll 0% 0% red;">
        <div style="float:right;margin:10px;width:200px">
            <img width="200px" height="200px" src="http://knowafest.co.in/images/logo.png">
        </div>
    </div>
    <div style="display: table-cell;">
        <!-- The New Addition is here -->
        <div trbidi="on" style="text-align: left;" dir="ltr">
            <div style="clear: both; text-align: center;" class="separator"></div>
<span id="fullpost"> This information is brought to you by <a target="_blank" href="http://knowafest.com/">www.knowafest.com</a>  </span>
            <br>
            <hr>
<span id="fullpost"><span style="font-weight: bold;">Event:</span> Fuseout 2013 | Technical Fest
            <br>
            <br><span style="font-weight: bold;">Fuseout 2013 is Organised by:</span>  <a href="http://www.knowafest.com/search/label/Government%20Engineering%20College">Government Engineering College</a>, <a href="http://www.knowafest.com/search/label/Trivandrum">Trivandrum</a>, <a href="http://www.knowafest.com/search/label/Kerala">Kerala</a>
            <br>
            <br><span style="font-weight: bold;">Fuseout 2013 dates:</span> 
            <br>Fest dates: 15th-17th March 2013
            <br>Last Dates for Registration: Spot Registrations Open
            <br>
            <br><span style="font-weight: bold;"> Details:</span>
            <br>Fuseout Is A Technical Fest Organised By The Electrical And Electronics Department Students Of Govt Engineering College Barton Hill ,Trivandrum As Part Of AAGNEYA'13 Aiming To Bring Together The Intellectual Minds Of Our Country In A Competition Like None Other.
            <br>
            <br><span style="font-weight: bold;">Fuseout 2013 Technical Events in Trivandrum :</span>
            <br>Robotron
            <br>Circuito Metego
            <br>Scrap Maniac
            <br>Wire-In
            <br>
            <br><span style="font-weight: bold;">Fuseout 2013 Co-ordinators Details:</span><span style="color: green;"><br>Leo K A<br>9995992755</span>
            <br><span style="font-weight: bold;">How to reach Government Engineering College: </span>
            <br>At Kanakakunnu Palace Grounds
            <br>
            <br><span style="font-weight: bold;">Fuseout 2013 Website: </span><a target="_blank" href="http://tinyurl.com/fuseout2">http://tinyurl.com/fuseout2</a>
            <br><span style="font-weight: bold;">Fuseout 2013 Facebook Link: </span><a target="_blank" href="http://www.facebook.com/fuseout.aagneya"><img src="http://knowafest.co.in/images/icons/facebook.gif"></a>
            <br><span style="font-weight: bold;">Fuseout 2013 Youtube Link: </span><a target="_blank" href="http://www.youtube.com/watch?v=TP4igb1dMdk"><img src="http://knowafest.co.in/images/icons/youtube.gif"></a>
            <br>
            <br>
            <br><span style="font-weight: bold;">Fuseout 2013 Event Departments: </span>CSE, ECE, IT, EEE, Instrumentation, Mechanical, Energy, Arts</span>
        </div>
    </div>
    <div style="clear: both;"></div>
</div>

我希望这符合你的目的。

Answer 2

您在浮动内容后遇到clear: both问题：

<div style="clear: both; overflow: hidden; display: inline; background: none repeat scroll 0% 0% red;">
<div style="float:right;margin:10px;width:200px">
<img height="200px" src="http://knowafest.co.in/images/logo.png" width="200px">
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>

请删除它以使其按预期工作（我希望）。

<div style="clear: both; overflow: hidden; display: inline; background: none repeat scroll 0% 0% red;">
<div style="float:right;margin:10px;width:200px">
<img height="200px" src="http://knowafest.co.in/images/logo.png" width="200px">
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="text-align: center;">
</div>

Answer 3

* 强文 *也许这就是你想要的东西。

DEMO

您只需对图像使用 float：right 样式。还要检查您使用清除：两者样式的位置。这也会使对齐变得混乱。

<img src="http://knowafest.co.in/images/logo.png" width="95" height="84" style="float:right" /> <span id="fullpost">