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

StackOverflow https://stackoverflow.com/questions/4185121

  •  10-10-2019
  •  | 
  •  

题

我对某些分区元素的概述遇到了问题。

我得到了以下结构。

<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）元素的Divs较小一点，就像包含图像的Divs一样。任何元素都没有边距或填充。所有Divs的高度都是相同的，但是Div的顶部仍然有一些包含文本的技能列表。 DIV上方没有包含图像的空格。为什么要解决这个问题？

例子： 点击

有帮助吗？

解决方案

尝试添加 vertical-align:top; 对所有未对准的物品的CSS。当我在您的测试页面上使用Firebug做到这一点时工作。

其他提示

几件事：

  • 您似乎正在滥用HTML元素： h3, h4, 等等 头条新闻.
  • 另一方面，您使用的divs太多。考虑存在的许多其他HTML元素。例如，您称之为“技能主义者”的元素尖叫为列表（ol,ul).
  • 如果您担心这样的小像素差距，则HTML/CSS可能是您错误的工具。 HTML/CSS的整个概念是灵活的，并允许在不同的系统上进行不同的渲染，而不是成为Pixel Perfect Design工具。
  • 您的问题可能是因为默认情况下图像是位于字体基线上的内联元素，并为后代留出空间。尝试设置 vertical-align: bottom 在图像上。

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

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

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

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

希望这可以帮助。

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

使用CSS重置样式表可以帮助删除各种浏览器呈现不同的默认边距和填充。有一个 http://developer.yahoo.com/yui/3/cssreset/

我同意TobiasMay-如果我们有一个演示页面或类似的内容，这将有所帮助。

您可以发布一些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>

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

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

图像的DIV的位置比其他图像的原因要高一点 内联块在其包含的线框中对齐方式:

（...）[b]牛是水平布置的，一个接一个地从一个接一个的块开始，始于包含块的顶部。这些盒子之间尊重水平边缘，边界和填充物。 （...）包含形成一条线的框的矩形区域称为 线框.

(...)

一个线盒总是足够高，适合其中包含的所有盒子。 但是，它可能比其中包含的最高盒子高（例如，如果盒子对齐，以使基线对齐）。 当盒子B的高度小于包含它的线路盒的高度时，线盒中B的垂直对齐是由 “垂直空军” 财产。

注意粗体部分。的默认值 vertical-align 是 baseline. 。示例中的图像在线框中移动，以将它们对齐到周围文本的基线。这样一来，它们就会增加线框的高度，在文本divs的顶部留下一些额外的空格。

如果您仍然不太了解正在发生的事情，请尝试增加 font-size 的 h4 在你的榜样中，例如 32px, ，并删除固定的 height 从 .skilllist div.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top