代码之家 › 专栏 › 技术社区 › Mark Baijens

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

outlining html xhtml css

Mark Baijens · 技术社区 · 14 年前

我对一些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上面没有空白。这是为什么?我如何修复?

例子: Click

6 回复 | 直到 14 年前

andyface 14 年前

vertical-align:top;

RoToRa 14 年前

h3 h4
ol ul
vertical-align: bottom

clifgriffin 14 年前

#FFFFFF

andyface 14 年前

http://developer.yahoo.com/yui/3/cssreset/

tobiasmay 14 年前

//编辑

接下来,我将完整地修复您的标记:

<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和一个有效的ul li

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

mercator 14 年前

添加 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 . 示例中的图像将在“行”框中向上移动,以使其与周围文本的基线对齐。这样做会增加行框的高度,在文本分隔符的顶部留下一些额外的空白。

如果你仍然不太明白发生了什么,尝试增加 font-size 的 h4 在你的例子中,比如, 32px ,并移除固定的 height 从 .skilllist div .