Question

在一个WordPress插件（自己的创作）中，我想定位一些WooCommerce类别图像......但是有些奇怪的事情发生了。

通过以下方式或多或少地定义每个类别框：

<div class="edu-cat-item">
    <a href="/someurl/"><img src="some-image.jpg></a>
    <a href="/someurl/">Title of the cat</a>
</div>

在CSS中，框被浮动到左边......

.edu-cat-item {
   box-sizing:border-box;
   width: 175px;
   float: left;
   padding:10px;
}

edu-cat-item img {
   border-width:2px;
   border-style:solid;

}

.edu-cat-item a {
   text-align:center;
   margin-left:auto;
   margin-right:auto;

}

而且 - 真的不是一个惊喜 - 它的确有效......但是不可能！

客户希望所选类别具有橙色边框。

因此，在PHP代码中，一个额外的类被添加到一个特定的项目...... HTML变为：

<div class="edu-cat-item  edu-sub-select">
    <a href="/someurl/"><img src="some-image.jpg></a>
    <a href="/someurl/">Title of the cat</a>
</div>

CSS还有一个额外的内容：

.edu-sub-select img {
    border-color: #ff9900!important;
    border-style: solid;
    border-width: 2px;
}

现在奇怪的事情发生了...当它不止一行时，第二行就是缩进＆＃39;选定猫背后的一个位置...很想发布图片，但我需要＆＃39;声誉10＆＃39;这样做......

但愿意通过邮件分享。

Answer 1

您缺少一个引号：

<a href="/someurl/"><img src="some-image.jpg></a>

可能这只是发布问题时的错误。您是否可以创建一个显示问题的jsfiddle，很难理解你的意思＆＃34;缩进＆＃34;

顺便说一下，您可能想尝试删除float:left;并替换为display:inline-block;。我尽可能避免float的不可预测的行为。

很好奇所以我自己做了一个简化的小提琴：http://jsfiddle.net/bca1m1n2/

发生的事情是边界导致橙色元素的高度高于其余部分。当浮动元素进入下一行时，它会将自身定位在橙色元素上，因为橙色元素较高。行为似乎很奇怪，但是是正确的 - 所以不要使用浮动进行对齐：）

因此，如果您给.edu-cat-item一个固定的高度，那也可以解决问题

.edu-cat-item {
   width: 175px;
   height:100px;
   float:left;
}

很酷的问题OP

Answer 2

除了Kurt Serge写的内容之外，你可以使用轮廓而不是边框。这样你的“边界”（轮廓）不会影响物品的流动这里是MDN / W3C的CSS轮廓的一个小定义（他们写同样的东西）：

大纲不占用空间

MDN增加了以下细节：

它们被绘制在内容之上。

所以你的css看起来像这样：

.edu-sub-select img {
  outline-color: #ff9900!important;
  outline-style: solid;
  outline-width: 2px;
}

css box＆＃39;跳过＆＃39;在第二行

2 个答案: