0

它不会停留在我想要的位置，看看这个：

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

IE浏览器：

火狐浏览器：

我希望文本位于顶部（尝试垂直对齐：顶部），并且我希望图像位于 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>
4

5 回答 5

2

确保两者的边距都设置为 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-11T14:42:00.390 回答
0

发生这种情况是因为两个浮动 div 的（外部）宽度之和大于外部框的内部宽度，因此它们不适合同一行。

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

于 2009-07-11T14:42:55.567 回答
0

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

于 2009-07-11T14:56:59.477 回答
0

当您说 width: 30% 或 width: 70% 时，它表示 div 内的内容的宽度，不包括 div 的填充、边框和边距。查看图像，我确定您已经为两个 div 添加了一些填充等。此外，我在您的代码中没有看到任何“背景：#fff”，所以我不确定哪个是“白色”框。

于 2009-07-11T15:03:40.853 回答
0

好吧，我是不是因为我用了一张桌子而被否决了？我不是设计师，我实际上是一名程序员，我知道有一些核心 css 设计师对使用表格布局的想法感到畏缩，但它似乎对我有用。与我一起工作的平面设计师提供了从烟花中自动生成的表格布局，这真的很痛苦。

无论如何，我个人会尝试实现 dersired 效果的方式，尽管纯 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-12T16:42:17.660 回答