Question

我遇到了一些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

Answer 1

有几件事：

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

Answer 2

尝试将vertical-align:top;添加到您的css中所有未对齐的项目。当我在你的测试页面上使用firebug做到这一点时工作。

Answer 3

你可以发布一些CSS或设置一个jsfiddle.net吗？否则你很难帮助你修复你的父亲..

// EDIT

在这里，我完全修复了你的标记：

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

和具有工作原理的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/

Answer 4

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

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

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

要更改它，您必须提供自己的价值。

希望这有帮助。

Answer 5

可能会降低浏览器自动添加到h标签的边距（以及p和其他一些标签）。

使用css重置样式表可以帮助删除许多默认边距和填充，各种浏览器以不同方式呈现。在http://developer.yahoo.com/yui/3/cssreset/

有一个

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

Answer 6

将vertical-align: top or vertical-align: bottom（根据您的喜好）添加到div.inline规则中。这使它适用于所有浏览器。

带图像的div位置略高于其他图像的原因归因于the way inline-blocks are aligned in their containing line box：

（...）[B]牛从一个容纳块的顶部开始一个接一个地水平布置。这些框之间会考虑水平边距，边框和填充。（...）包含形成一条线的框的矩形区域称为线框。

（...）

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

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

如果您仍然不太了解发生了什么，请尝试将示例中font-size的{{1}}增加到h4，然后删除已修复的32px来自height。

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

6 个答案: