浏览器开发工具：CSS Grid与RTL不太匹配

Question

如何将浏览器devtools中的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>

Answer 1

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