如何对齐用户个人资料图像和名称+其他信息答案

【问题标题】：How to align user profile image and name + other info如何对齐用户个人资料图像和名称+其他信息
【发布时间】：2010-12-08 20:03:10
【问题描述】：

我已经能够为个人资料图片以及图像右侧的名称和位置以及其他一些信息创建一个部分。但是，要使用信息调整图像，我必须通过额外的步骤使其看起来可以接受，但编码明智它并不准确，因为它可能会产生跨浏览器问题。

我可以使用哪些 CSS 来创建用户个人资料图片和名称以及其他信息，例如：https://stackoverflow.com/users/441049/aaa

这是我正在寻找的顶部部分。我还在学习的过程中。谢谢。

这是代码：

#manpic {
    margin-left:30px;
    margin-top:20px;
    background-color: #FFFFFF;
    padding: 5px;
    display:block;
} 

#manname {
    color: #D7D7D7;
    margin-left: 150px;
    margin-top:-60px;
    font-family: "Lucida Grande", Verdana;
    font-weight:bold;
    font-size: 20px;
}

【问题讨论】：

是否有任何您正在使用的 HTML 和 CSS 可以发布以获得批评？
#manpic { margin-left:30px;边距顶部：20px；背景颜色：#FFFFFF；填充：5px；显示：块； } #manname { 颜色：#D7D7D7;左边距：150px；边距顶部：-60px；字体系列：“Lucida Grande”，Verdana；字体粗细：粗体；字体大小：20px； }
@AAA：不要作为评论发布！
@eric 刚到这个网站，为什么不呢？
@AAA：以后只编辑原帖。这意味着您不必将其作为评论发布到每个答案，并使其更清晰。此外，如果您将其缩进四个空格，它会对其进行颜色编码，就像我在上面编辑您的帖子一样。

标签： html css image profile

【解决方案1】：

我没有看到您的代码有任何问题，除了填充可能是一个问题，测试一下。

我会使用 IEtester 在 IE7 和 IE8 中检查页面 http://www.my-debugbar.com/wiki/IETester/HomePage

在 Firefox、Safari 和 Chrome 中测试。如果您在这些浏览器中看不到任何内容，那么我真的不会担心代码。

如果您使用浮动，请确保您已清除。使用 IE，我发现填充很烂，在大多数情况下，您应该始终使用 MARGIN 来调整 div 之间的间距。

希望有所帮助！

克里斯

【讨论】：

嘿，克里斯，这是我正在使用的代码：#manpic { margin-left:30px;边距顶部：20px；背景颜色：#FFFFFF；填充：5px；显示：块； } #manname { 颜色：#D7D7D7;左边距：150px；边距顶部：-60px；字体系列：“Lucida Grande”，Verdana；字体粗细：粗体；字体大小：20px;
使用负数拖动上边距不会造成问题...？
是的，除非需要在影响它的 div 下方或上方解析，否则您不需要 -60px 的上边距。