1

我遇到了一些 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 上方没有空格。为什么会这样，我该如何解决？

示例：单击

4

6 回答 6

1

几件事：

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

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

于 2010-11-15T16:25:38.927 回答
0

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

//编辑

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

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

于 2010-11-15T14:16:23.350 回答
0

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

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

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

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

希望这可以帮助。

于 2010-11-15T14:21:06.847 回答
0

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

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

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

于 2010-11-15T14:21:49.780 回答
0

在规则中添加vertical-align: top或vertical-align: bottom（无论您喜欢哪个）div.inline。这使它适用于所有浏览器。

带有图像的 div 位置比其他 div 稍高的原因是由于内联块在其包含的行框中对齐的方式：

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

(...)

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

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

如果您仍然不太明白发生了什么，请尝试将示例font-size中的h432pxheight.skilllist div

于 2010-11-16T17:20:17.783 回答