0

我正在尝试制作一个简单的 3 单元格 div，它将显示雪茄的评级列表。我希望左边的单元格是雪茄的方形图像，中间是名称，右边是评级。代码工作正常，直到我添加图像 - 然后它似乎在图像底部添加了一个 8px 边框，显示单元格的背景颜色。使用 Wordpress（如果有帮助的话）。任何帮助表示赞赏！

这是页面：http ://cigardojo.com/best-cigars/

HTML

<div class="ratingWrapTopRated">
<div class="cigarImage"><img src="http://cigardojo.com/wp-content/uploads/2014/08/cigar-test.jpg" alt="test" width="90" height="90" class="alignnone size-full wp-image-14045" /></div>
<div class="cigarName">Opus XXX Power Ranger</div>
<div class="numericalScoreTopCigars"></div>
</div>

CSS

.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0 auto;
display:table;
font-family:Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}

.cigarImage {
background:#fff; color:#fff;
display:table-cell;
width: 90px;
}

.cigarName {
background:#ff5100; color:#fff; text-align:center;
display:table-cell;
vertical-align:middle;
text-transform: uppercase;
}

.numericalScoreTopCigars {
background:#000; color:#fff; text-align:center;
width:25%;
display:table-cell;
vertical-align:middle;
font-weight:bold;
border-left: 4px solid; border-color: #fff;
}
4

4 回答 4

4

添加line-height: 0;到.cigarImage，你会摆脱它。很多人会告诉你使用display: block;，这会起作用，但这不是真正的问题。问题是img标签是内联的，并且您获得了该空间，因为您获得了图像加上它在该容器中的行高，并创建了您在图像下方看到的空间。正确的解决方案是添加我刚才告诉你的内容。

因此，像这样编辑您的课程：

.cigarImage {
    background:#fff; color:#fff;
    display:table-cell;
    line-height: 0; /* Here is the solution */
    width: 90px;
}

你会得到正确的工作:)

于 2014-08-22T17:05:24.860 回答
0

这是因为图像inline默认情况下（即，它们被视为在一行文本上），并且它们的底部与文本行的“基线”对齐，而不是绝对底部。在图像下方，您可以从基线下方的其余行获得空间。如果您只是将图像设置为display: block;它应该摆脱它（那么它不会被视为一行文本的一部分，而是它自己的块）。

于 2014-08-22T16:56:05.983 回答
0

只需在 .cigarImage 类上添加 5px 左右的填充权。您还应该增加图像高度或规定图像旁边信息栏的高度，因为它们没有对齐。

于 2014-08-22T17:00:20.433 回答
0

在您的班级 ratingWrapTopRated 班级中，将 line-height 设置为 0：

.ratingWrapTopRated {
    background:#fff;
    width:600px !important;
    height: 90px !important;
    margin: 0;
    display:table;
    font-family:Helvetica, Arial, sans-serif;
    padding-bottom: -8px;
    margin-bottom: 10px;
    line-height: 0; /*here*/
}
于 2014-08-22T17:06:06.563 回答