图片超出div，

BoXoft 2008-09-15 07:35:15

用>1024x768分辨率的显示器观看
http://www.appvee.com/t/palringo-instant-messenger
可以看到图片超出了div。

相关的代码如下：

<div class="xcontent" style="padding-left: 10px; padding-right: 10px;">

	<img src="./uploads/1218833517-Palringo%20-%201.PNG" align="left" hspace="10">

	Palringo manages to combine the best instant messaging clients into one app for the iPhone. You can load up your buddy lists from your favorite instant messaging services, such as: Windows Live Messenger, Yahoo! Messenger, AOL Instant Messenger, Gadu-Gadu, AOL ICQ, XMPP/Jabber, Google Talk, and iChat. This is on top of the Palringo instant messaging service that includes its own buddy list and a completely user friendly community aspect.<br><br>

Adding another chat client to Palringo is very easy. You simply select which client you want and let it populate your buddy list. If you have multiple lists from different clients they do mix together depending on who is online and who isn't. This makes things mildly confusing at times, but considering how smooth it scrolls, you shouldn't run into any issues.<br><br>

	<img src="./uploads/1218833517-Palringo%20-%202.PNG" align="right" vspace="5" hspace="10">

	If you're looking for more of a chatroom type feel you can easily join or create a Palringo community. This populates a portion of your buddy list with a Palringo users who share the same interests as you. Each community has its own main chat room as well and can be enjoyable to participate in if you're looking to talk with new people.<br><br>

Unless you're only looking to use AIM with no intentions of loading up any other form of chat client, Palringo should be your instant messaging app of choice.<br>

</div>

请教各位，如何修改CSS，使得div可以容纳图片。谢谢！

...全文

588 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

yan14mine 2008-09-17

打赏
举报

<div class="xcontent" style="padding-left: 10px; padding-right: 10px;">
只有这些吗能贴全出来吗 class=xcontent

m1z1y10 2008-09-17

打赏
举报

<img src="./uploads/1218833517-Palringo%20-%201.PNG" align="left" hspace="10" style=" margin-top:5px;" />
你试试加上style=" margin-top:5px;"

BoXoft 2008-09-17

打赏
举报

自己顶~~~~~~~~~~

BoXoft 2008-09-17

打赏
举报

谢谢大家。Facebook上的一个老外解决了这个问题。

you just have to put a clear div under the text:

...<br />

<div style="clear:both;"></div>

</div>

再次感谢大家。

marco5005 2008-09-17

打赏
举报

想要图文混排，则必须将img变为浮动状态。
所以你在img里加了align属性使之变成了浮动状态，但处于浮动状态的元素是脱离文档流的，因此不会把包含它的层撑大。
据我所知，既想图文混排，又要img处于文档流之中的方法是不存在的，因为就像我刚才所说，两者是矛盾的。
给你几个解决方案：
1. 用js来控制：在文档load后根据最后一个图片的位置和高度与包含它的div的位置和高度进行对比，如果它的底边超过了div的底边，则给div设置height，让其超过图片，从而达到所要求的效果；
2. 复杂div.xcontent内部的结构：将文字文字分段，并与img置于不同的div中，再进行图文混排。
| 图片1 | 第一段文字（只输出一定行数） |
| 第二段文字（只输出一定行数）| 图片2 |
3. 改用table来进行图片混排：将img与文字置于不同的td中。
------------------------------
| 图片1 | 第一段文字 |
------------------------------
| 第二段文字| 图片2 |
------------------------------
以上方法2和方法3比较类似，实现起来需要根据内容来动态变化控制段落的输出，比较复杂。
如果js比较熟的话推荐使用第一种办法，关于元素位置的获取，可以参考prototype.js或jquery等类库中的相关方法，要注意不同浏览器上位置获取方式的不同。

tweilight 2008-09-16

打赏
举报

试试在这个DIV里写,,100自己换



min-width:100px;

width:auto !important; 

width:100px; 

overflow:visible;

zzxap 2008-09-16

打赏
举报

zzxap 2008-09-16

打赏
举报

用auto

sjmlsxp 2008-09-16

打赏
举报

不知道你怎么弄得

CSS不可能控制不了式样的

BoXoft 2008-09-16

打赏
举报

谢谢。可惜不行。

<div class="xcontent" style="padding-left:10px;padding-right:10px;">

	<img src="./uploads/<?= $xscreenshot1 ?>" align="left" hspace="10" style="width:160px;height:240px;" />

	<?php

		if ($xmiddle < 1)

		{

			echo $xreview . "\n";

	?>

			<img src="./uploads/<?= $xscreenshot2 ?>" align="right" hspace="10" vspace="5" style="width:160px;height:240px;" />

	<?php

		}

		else

		{

			for ($i = 0; $i < $xmiddle; $i++)

				echo $xreview_array[$i] . "<br /><br />\n";

	?>

			<img src="./uploads/<?= $xscreenshot2 ?>" align="right" hspace="10" vspace="5" style="width:160px;height:240px;" />

	<?php

			for ($i = $xmiddle; $i < count($xreview_array) - 1; $i++)

				echo $xreview_array[$i] . "<br /><br />\n";

			echo $xreview_array[$i] . "\n";

		}

	?>

</div>