Question

为了遵循正确的网络标准，我试图将图像和div内联布局。为了达到这个目的 - 我使用了display：inline属性。但后来我遇到了以下问题：图像从中心线渲染，而div不尊重设置的高度参数。我尝试过使用line-height参数，但是没有给出任何有用的结果。我还尝试了各种组合，将margin / padding设置为某些值或自动，或者用span替换div，或者用其他div包装img和div。我已经设法通过使用position：absolute来实现期望的结果，但是在我想要使用整个组件的居中/相对定位的情况下这没有帮助...

任何线索或想法或故障排除提示？

请找到下面的html示例：

<html>
<head>
    <title>Test Page</title>
</head>
<body>      
    <div style="border: solid 2px green; height:40px;width: 600px;">
        <span style="border:solid 2px green; position: absolute; height:50px; width: 50px;">
            <i m g 
          style="display:inline; margin: 3px; padding:0px; border: solid 2px lightblue;"
            height="38px"
            width="38px" 
            src="someimage . JPG"
        />
        </span>
        <span style="position:absolute; left: 100px; width:400px; height:60px; margin:3px; border: solid 2px red;">
            Some text that should be displayed in the center/middle of the div
        </span>
    </div>
    <br />
    <br />
    <br />
    <br />
    <div style="border: solid 2px green; height:80px;width: 600px;">
        <span style="border:solid 2px green; position: absolute; height:50px; width: 50px; vertical-align:bottom;">
            123
        </span>
        &nbsp;
        <span style="position:absolute; left: 100px; width:400px; height:60px; margin:3px; border: solid 2px red;">
            Some text that should be displayed in the center/middle of the div
        </span>
    </div>
</body>
</html>

Answer 1

试试这个：

<div style="display: inline-block;"></div>

它实际上是CSS2 standard的一部分，用于将内联事物显示为像角色一样的块。

但有一件事是<div> s不应该出现在<p>元素中，所以你应该使用<span>标签。

Answer 2

我不确定你想要实现的目标。但听起来你想要在div中浮动带有文本的图像。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Test Page</title>
<style>
.wrap {
    border: solid 2px green;
    width: 600px;
    overflow:hidden;
}
.myimg {
    display:inline; 
    margin: 10px; 
    padding:0px; 
    border:solid 2px green; 
    height:70px; width: 70px;
    float:left;
}
</style>
</head>
<body>      
    <div class="wrap">
        <img src="myimagepath" class="myimg" />
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
</body>
</html>

Answer 3

感谢您尝试提供帮助。

首先 - 解决方案：我为图片标记添加了一些属性，这有很多帮助： hspace =“0”vspace =“0”align =“top”border =“0”

第二：解释：由于我想做“内联”（或“内联块”）的事情，我不得不弄清楚内联/内联块元素是如何由浏览器布局的。如果您阅读CSS2布局规范，您很快就会发现image和div存在问题。问题在于垂直对齐 - 其中图像与基线对齐/渲染，而div用于底线（反之亦然）。这导致我的例子没有对齐。为图像标记设置上述参数有帮助。

说明：由于IE5,6,7，Firefox，Gecko，WebKit，Chrome，CSS2和BoxModel的复杂历史，布局模型存在一些缺点。原始问题来自IE5和6处理BoxModel与CSS标准不同的方式。这可能是采用怪癖模式和DTD标准的主要原因。然而，这是一个广泛的主题，如果你想了解更多，我重新阅读CSS2规范和推荐。如果您想更多地讨论它 - 请随时通过PM与我联系

再次感谢所有人为你的布局提供帮助和好运

亲切的问候 MP

显示Img和Div内联 - 它不是内联呈现的

3 个答案: