它不留在我想要它，看看这个：CSS花车搞砸

<div style="float: left; width: 30%"> 
<img src="{avatar}" alt="" /> 
</div> 

<div style="float:right; width: 70%; text-align: left"> 
{message} 
</div> 

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

Internet Explorer中：
http://i32.tinypic.com/34sfiu9.png

Mozilla Firefox浏览器：
http://i28.tinypic.com/2vm9cab.png

我希望文字在顶部（尝试vertical-align：top），并且我想要图像在IE中的白色框中。

希望更熟练的人可以帮助我。

谢谢！想不通的问题：/

编辑：增加了整个代码

* { padding: 0; margin: 0; } 

body { 
font: 11px Geneva, "Trebuchet MS", Arial, Verdana, sans-serif; 
width: 999px; 
background: #EFEFEF; 
} 

#content { 
width: 400px; 
} 

.thread-content { 
padding: 5px; 
border: 1px solid #CECFCE; 
background: #FFF; 
} 

div.header { 
border: 1px solid #CECFCE; 
background: #FFF; 
margin-bottom: 10px; 
} 


<div id="content"> 

<div class="header">{title}</div> 
<div class="thread-content"> 

<div style="float: left; width: 30%; padding: 5px"> 
<img src="{avatar}" alt="user avatar" /> 
</div> 

<div style="float: right; width: 70%; text-align: left"> 
{message} 
</div> 

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

</div>

来源

2009-07-11 Digerdoden

您是否也可以包含父容器元素的html/css？ – 2009-07-11 14:42:15

@chris：已完成交易 – Digerdoden 2009-07-11 15:09:10

确保两者的利润率都设置为0：

<img src="{avatar}" alt="" style="float: left; width: 30%; margin: 0px"/> 

<div style="float:right; width: 70%; text-align: left; margin: 0px"> 
{message} 
</div> 

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

由于CSS可以真的很棘手，一些其他的解决方案可以尝试：

让两者都浮起来，应该没有区别。
确保边框不会增加大小。
减少一点宽度，IE是固执的。

来源

2009-07-11 14:42:00 Dykam

仍然相同，但感谢您试图帮助 – Digerdoden 2009-07-11 14:48:36

发生这种情况的原因是两个浮动div的（外部）宽度的总和大于外部框的内部宽度，所以它们不适合放在同一行中。

尝试增加外部div的宽度，减少其填充，减少内部框的宽度或边距或填充。

来源

2009-07-11 14:42:55

代码工作正常，当我尝试它。您确定图像或文本上没有任何填充或边距？这会弄乱你使用的百分比。如果你有它检查Firebug中的图像和文本，看看正在应用什么样式。

来源

2009-07-11 14:56:59 Jared

当你说宽度：30％或宽度：70％，这意味着div内的内容宽度，不包括div的边距和边距。看看这些图片，我确定你已经在div上添加了一些填充等。另外，我在代码中看不到任何'背景：#fff'，所以我不确定哪个是'白色'框。

来源

2009-07-11 15:03:40

好吧，我因为使用了桌子而被拒绝了吗？我不是通过交易设计师，我实际上是一名程序员，我知道有核心的css设计师对使用表格布局的想法感到畏惧，但它似乎对我很有用。我与之合作的图形设计师从烟花中自动生成表格布局，以实现这种效果，这是一件非常痛苦的事情。

无论如何，我个人会试图完成这种清晰的效果，尽管纯粹的CSS会更像。

<html> 
<head> 
    <title>SandBox</title> 
    <style type="text/css"> 
     #outerDiv 
     { 
      margin:0; 
      background-image:url(myImage.gif); 
      background-position:top left; 
      background-repeat:no-repeat; 
      padding-left:30%; 
      min-height:200px; 
      background-color:#777777;    
     } 
     #innerDiv 
     { 
      background-color:#333333; 
     } 
    </style>  
</head> 
<body> 
    <div id="container" style="width:500px;"> 
     <div id="outerDiv"> 
      <div id="innerDiv">content goes here</div> 
     </div> 
    </div> 
</body>

注：我不是一个设计师。我也做了这个wiki。所以如果你打算投票，请编辑或者至少发表评论。

来源

2009-07-12 16:42:17

CSS花车搞砸

编辑：增加了整个代码

回答

相关问题