css - 伪元素未在左上角对齐

标签 css google-chrome firefox flexbox

我正在使用 CSS counter 和 content 显示图 block 编号。我想在图 block 的左上角显示这些数字。以下代码在 Chrome 中正确显示，但在 FF 或 IE 11 中不正确(尚未在其他浏览器上检查)。

我需要对 CSS 进行哪些更改才能始终如一地在左上角显示数字？

Chrome:这就是我想要的:

Chrome - this is how I want

Firefox:数字左对齐...但不是顶部:

Firefox - numbers aligned to left ... but not top 

.tiles {
  /* flex properties as container (tiles level 1, 2 & 3) */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: strech;
  align-content: strech;
  /* flex properties as content (tiles level 2 & 3) */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: strech;
}

.tiles.level1 {
  flex-direction: column;
  flex-grow: 0;
  width: 600px;
  height: 300px;
  counter-reset: tileNum;
}

.tiles.level2 {
  flex-direction: row;
}

.tiles.level3 {
  flex-direction: row;
}

.tiles .title {
  align-self: center;
  font-size: 42px;
}

.tile {
  border: 1px solid black;
  background-color: white;
  width: 1px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  /* auto = use width & height values if available */
  font-size: 24px;
}

.centerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.centerContent {
  /*	flex-grow: 1;
	flex-shrink: 1;
	align-self: center;*/
}

.tile:before {
  counter-increment: tileNum;
  content: counter(tileNum);
  align-self: flex-start;
  flex-grow: 0;
  font-size: 16px;
}

.tile:after {
  content: ' ';
  align-self: flex-end;
  flex-grow: 0;
  font-size: 16px;
}

.brand {
  text-decoration: underline;
  font-variant: small-caps;
}
<section class="section static">
  <div class="tiles level1">
    <span class="title">
			<span class="brand">So</span>mething
    </span>
    <div class="tiles level2">
      <div class="tiles level3">
        <span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
      <div class="tiles level3">
        <span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
    </div>
    <div class="tiles level2">
      <div class="tiles level3">
        <span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
      <div class="tiles level3">
        <span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
    </div>
  </div>
</section>

注意:

  1. 我正在使用 flex box 来显示图 block ，并且更喜欢仅使用 flexbox 的解决方案
  2. 我正在寻找纯 CSS 解决方案。 (我很确定这是可能的，但我错过了一些与 flexbox 属性相关的东西。)
  3. 需要嵌套 .tiles，因为:我想在 PC 或移动设备上以横向模式查看页面时连续显示 4 个图 block ，但在查看时只想连续显示 2 个图 block 在纵向模式下的移动设备上。我可以为此找到一些替代方案。

最佳答案

问题的根源是align-content这里:

.centerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center; <-- causing the problem
    flex-direction: row;
    flex-wrap: wrap;
}

当你告诉 flex 容器中的行居中时，这会折叠所有额外的空间，将所有行打包在容器的中心。这就是 align-content: center 所做的。

所以你的计数器伪元素，browsers consider a flex item ，不应移动到容器的顶部。您指定的 align-self: flex-start 应该无法实现您的目标，因为该元素及其兄弟项被限制在居中的 flex 行中。

因此，就遵守规范而言，Firefox 拥有此权利。

Chrome，就像它经常做的那样(参见 here 和 here 的例子)，似乎在考虑逻辑用户行为以改善用户体验(他们称之为 intervention )。

无论如何，一旦你删除了 align-content: center，stretch 默认值再次接管，你的 flex 元素可以沿着容器的整个高度自由移动.

.tiles {
  /* flex properties as container (tiles level 1, 2 & 3) */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: strech;
  align-content: strech;
  /* flex properties as content (tiles level 2 & 3) */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: strech;
}

.tiles.level1 {
  flex-direction: column;
  flex-grow: 0;
  width: 600px;
  height: 300px;
  counter-reset: tileNum;
}

.tiles.level2 {
  flex-direction: row;
}

.tiles.level3 {
  flex-direction: row;
}

.tiles .title {
  align-self: center;
  font-size: 42px;
}

.tile {
  border: 1px solid black;
  background-color: white;
  width: 1px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  /* auto = use width & height values if available */
  font-size: 24px;
}

.centerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* align-content: center; <-- REMOVE */
  flex-direction: row;
  flex-wrap: wrap;
}

.centerContent {
  /*	flex-grow: 1;
	flex-shrink: 1;
	align-self: center;*/
}

.tile:before {
  counter-increment: tileNum;
  content: counter(tileNum);
  align-self: flex-start;
  flex-grow: 0;
  font-size: 16px;
}

.tile:after {
  content: ' ';
  align-self: flex-end;
  flex-grow: 0;
  font-size: 16px;
}

.brand {
  text-decoration: underline;
  font-variant: small-caps;
}
<section class="section static">
  <div class="tiles level1">
    <span class="title">
			<span class="brand">So</span>mething
    </span>
    <div class="tiles level2">
      <div class="tiles level3">
        <span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
      <div class="tiles level3">
        <span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
    </div>
    <div class="tiles level2">
      <div class="tiles level3">
        <span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
      <div class="tiles level3">
        <span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
    </div>
  </div>
</section>

jsFiddle demo

有关更完整的解释，请参阅此帖子:

关于css - 伪元素未在左上角对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45039016/

上一篇：html - 在 CSS 形状中间制作文本

下一篇：javascript - 获取 p 标签的行高

相关文章：

css - 使用 CSS 样式表(背景图像属性)在同一行 float 2 个图像

html - 试图让左右箭头粘在大图像的边缘。

javascript - Node 8.0 新符号并在 Number.prototype.toLocaleString() 的符号后添加空格

javascript - 强制 firefox 在 img.src 更改后重新加载图像

css - 哪些浏览器版本的 Firefox 支持 Bootstrap？

html - 跨浏览器兼容性 : Get Chrome overflow ellipsis behavior in Firefox

css - 如何只对第一行显示颜色？

jquery - 在悬停面板上显示黄色方 block

python - 什么是 python 的 useAutomationExtension for selenium？

c++ - NACL 不是加载模块吗？

©2024 IT工具网  联系我们