CSS 盒子在第二行“跳过”

Question

CSS 盒子在第二行“跳过”

3

在一个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;
}

现在奇怪的事情发生了...当有多行时，第二行会在所选的类别后面'缩进'一个位置...我很想发布图片，但我需要 '声望10' 才能这样做...

不过我愿意通过邮件分享它们。

- Wilko van der Ploeg

将图片放在像imgur这样的网站上，然后在问题中放置链接。 - Pete

2个回答

0

除了Kurt Serge所写的方法，您还可以使用轮廓线而不是边框。这样，您的“边框”（轮廓线）就不会影响项目的流动。
以下是MDN / W3C对CSS轮廓线的简要定义（它们写的是相同的内容）：

轮廓线不占用空间

MDN补充了以下细节：

它们在内容上方绘制。

因此，您的CSS应如下所示：

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

- tricon

谢谢，我会试试这个！ - Wilko van der Ploeg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kurt Serge · Accepted Answer

您缺少一个引号：

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

也许这只是发布问题时的一个错误。你能否创建一个 jsfiddle 来展示这个问题？很难理解你所说的“缩进”是什么意思。

顺便说一下，您可能希望尝试摆脱 float:left; 并替换为 display:inline-block;。我尽可能避免使用 float 的不可预测行为。

我很乐意为您翻译。这段内容与编程有关。作者制作了一个简化的 fiddle，链接为http://jsfiddle.net/bca1m1n2/。问题在于边框使得橙色元素的高度比其他元素更高。当浮动元素到达下一行时，它会相对于橙色元素定位，因为橙色元素更高。虽然行为看起来奇怪，但是是正确的-所以不要使用浮动来对齐:)。因此，如果给.edu-cat-item设置一个固定的高度，那么也可以解决问题。

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

酷的问题，楼主。