0

我有这样的内联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

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

现在看起来像下面

在此处输入图像描述

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

但我想像下面这样。

在此处输入图像描述

4

3 回答 3

1

这是工作解决方案

编码：

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

我希望这能达到你的目的。

于 2013-07-31T07:01:42.803 回答
0

*强文本*也许这是你想要的。

演示

您只需要在图像上使用float:right样式。还要检查你在哪里使用了clear:both样式。这也会弄乱对齐方式。

<img src="http://knowafest.co.in/images/logo.png" width="95" height="84" style="float:right" /> <span id="fullpost">
于 2013-07-31T07:27:33.943 回答
0

您在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>
于 2013-07-31T07:23:51.577 回答