html - 浏览器开发工具：CSS Grid 与 RTL 不一致

Question

如何将浏览器开发工具中的 CSS 网格与 RTL 对齐？在浏览器中：

但是，当我检查元素时：

devtools (F12) 的边框不适合在浏览器中输出。如何解决？

.wrapper {
  display: grid;
  grid-template-columns: 300px 1fr;
}

.col1 {
  background: red;
  height: 100px;
}

.col2 {
  background: blue;
  height: 100px;
}

<div dir="rtl">
  <div class="wrapper">
    <div class="col1"></div>
    <div class="col2"></div>
  </div>
</div>

标签： htmlcsscss-grid

Answer 1

从父 div 中删除 dir='rtl' 并为 .col1 和 .col2 添加 float: left。如下所示： .col1 { 背景：红色；高度：100px；浮动：左} .col2 {背景：蓝色；高度：100px；向左飘浮}