包含文本的 div 和包含图像的 div 的不同位置答案

【问题标题】：Different position of div's containing text and divs containing images包含文本的 div 和包含图像的 div 的不同位置
【发布时间】：2011-05-10 06:22:05
【问题描述】：

我遇到了一些 div 元素的轮廓问题。

我得到了以下结构。

<div id="skillcontent">
  <div id="skillname" class="inline">
   <div class="skilllist">
    <div><h3>[SKILL]</h3></div>
    <div><h3>[SKILL]</h3></div>
   </div>
  </div>

  <div id="skillstars" class="inline">
   <div class="skilllist">
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
   </div>
  </div>

  <div id="skillinfo" class="inline">
   <div class="skilllist">
    <div><h4>[YEARS],[LEVEL]</h4></div>
    <div><h4>[YEARS],[LEVEL]</h4></div>
   </div>
  </div>
 </div>

CSS：

.skilllist div {
    padding: 0px;
    margin: 0px;
    display: block;
    height: 25px; /*same height as star images*/
}

div.inline {
    display: inline-block;
}

h3 {
    font-size: 18px;
    color: #5b5b5b;
    margin: 0px;
}

h4 {
    font-size: 18px;
    color: #808080;
    margin: 0px;
}

img {
    vertical-align: bottom;
}

包含文本（h3 和 h4）元素的 div 比包含图像的 div 小一些。任何元素上都没有边距或填充。所有 div 的高度都相同，但在 div 顶部仍然有一些空格，其中包含文本的类技能列表。包含图像的 div 上方没有空格。为什么会这样，我该如何解决？

示例：Click

【问题讨论】：

我想要一些 CSS 代码，这会很有帮助。
附加到 IMG 标签的 CSS 怎么样？
没有，现在添加vertical-align: bottom;
很高兴您找到了解决方案，但我想指出，如果您使用了正确的 HTML（在这种情况下，表格非常合适），您就不会遇到问题首先。

标签： css xhtml html outlining

【解决方案1】：

将vertical-align: top or vertical-align: bottom（您喜欢的任何一个）添加到div.inline 规则。这使它适用于所有浏览器。

带有图片的 div 位置比其他的高一点的原因是 the way inline-blocks are aligned in their containing line box:

(...) [B]oxes 水平排列，一个接一个，从包含块的顶部开始。这些框之间会考虑水平边距、边框和填充。 (...) 包含形成一条线的框的矩形区域称为线框。

(...)

一个线框总是足够高，可以容纳它所包含的所有框。 但是，它可能比它包含的最高框高（例如，如果对齐框以使基线对齐）。 当框 B 的高度小于线的高度时包含它的框，行框中 B 的垂直对齐方式由'vertical-align' 属性确定。

注意粗体部分。 vertical-align 的默认值为baseline。您示例中的图像在行框中向上移动，以将它们与周围文本的基线对齐。这样做会增加行框的高度，在文本 div 的顶部留下一些额外的空白。

如果您仍然不太明白发生了什么，请尝试将示例中的 h4 的 font-size 增加到例如 32px，然后从 .skilllist div 中删除固定的 height。

【讨论】：

【解决方案2】：

尝试在所有未对齐的项目上将 vertical-align:top; 添加到您的 CSS 中。当我在您的测试页面上使用 firebug 执行此操作时工作。

【讨论】：

很抱歉，不幸的是，事情就是这样。我唯一可以建议的另一件事是在 IE8 中打开它并使用 web 开发工具来定位问题并添加 css 属性，直到它满足您的需要。然后检查 IE7 渲染和 adobe 浏览器实验室，以帮助查看它们是否一致。希望你能把它整理好。

【解决方案3】：

你能发布一些 css 或设置一个 jsfiddle.net 吗？否则很难帮你修复神器..

//编辑

给你，我完全修复了你的标记：

<div id="skills">
<div class="skillA">
  <h3 class="skill">Skill A</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
<div class="skillB">
  <h3 class="skill">Skill B</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
</div>

和具有工作 ul li 的 CSS

#skills{
background-color:lightgreen;
overflow:auto;
}
.skillA, .skillB{
overflow:auto;
margin-bottom:10px;
}
ul.skillRow{
display: inline;
}
ul.skillRow li{
list-style-type: none;
float:left;
}
p.foo{
float:left;
font-size:18px;
padding:6px;
}
h3.skill{
float:left;
display:inline;
padding:6px;
}

这里是小提琴链接：http://jsfiddle.net/tobiasmay/gKrkS/

【讨论】：

我在这里设置了一个小提琴jsfiddle.net/tobiasmay/Fa6Kr 但没有图像很难说.. 猜测使用浏览器重置和排版重置可以帮助你。您有任何指向实时开发网站的链接吗？ - 或者您可以将图像加载到小提琴中吗？

【解决方案4】：

几件事：

您似乎在滥用 HTML 元素：h3、h4 等用于headlines。
另一方面，您使用了太多的 div。考虑存在的许多其他 HTML 元素。例如，您称之为“skillist”的元素尖叫为列表 (ol,ul)。
如果您担心像这样的小像素间隙，HTML/CSS 可能不适合您。 HTML/CSS 的整个概念是灵活的，允许在不同的系统上进行不同的渲染，而不是成为像素完美的设计工具。
您的问题可能是因为默认情况下，图像是位于字体基线上的内联元素，并为降级留出了空间。尝试在图片上设置vertical-align: bottom。

【讨论】：

vertical-align: bottom 确实有一点帮助，但还有一点空白。我知道需要对代码进行一些重构。稍后会调查，但感谢您指出。其他技术如 HTML/CSS 目前不是一个选项。

【解决方案5】：

这可能取决于浏览器自动添加到 h 标签（以及 p 和其他一些标签）的页边距。

使用 css 重置样式表来删除许多不同浏览器呈现不同的默认边距和填充可能会有所帮助。有一个http://developer.yahoo.com/yui/3/cssreset/

我同意 tobiasmay - 如果我们有演示页面或类似的东西会有所帮助。

【讨论】：

感谢样式表的链接。仍然遇到同样的问题。我确实尝试将所有元素的所有边距设置为 0px，但这也没有修复它。

【解决方案6】：

没有看到你的 CSS，很难说。

您必须记住，每个元素都有标准/浏览器提供的默认样式。为了胜过这一点，您必须明确定义自己的价值观。

例如，大多数浏览器将页面背景的默认颜色定义为：#FFFFFF

要改变它，你必须提供你自己的价值。

希望这会有所帮助。

【讨论】：