Question

我有以下我希望用一些CSS格式化的HTML

HTML：

<div class="photodetail table">
  <div class="photodetail row">
    <div class="photodetail cell">Date:</div>
    <div class="photodetail cell">Mar 24 2015 14:23:59</div>
  </div>
  <div class="photodetail row">
    <div class="photodetail cell">Camera:</div>
    <div class="photodetail cell">SAMSUNG GT-I9300</div>
  </div>
  <div> <-- THIS DIV
    <div class="photodetail row">
      <div class="photodetail cell">Country:</div>
      <div class="photodetail cell">Australia</div>
    </div>
    <div class="photodetail row">
      <div class="photodetail cell">City:</div>
      <div class="photodetail cell">Sydney</div>
    </div>
    <div class="photodetail row">
      <div class="photodetail cell">Adderss:</div>
      <div class="photodetail cell">123-125 York St, Sydney NSW 2000, Australia</div>
    </div>
  </div>
  <div class="photodetail row">
    <div class="photodetail cell">Id:</div>
    <div class="photodetail cell">31</div>
  </div>
</div>

CSS：

  .table {
    display: table;
    .row {
      height: 26px;
      display: table-row;
      .cell {
        min-width: 53px;
        display: table-cell;
      }
    }
  }

这适用于前两行，因为该行直接位于表类下面。但接下来的3行嵌入了一个干扰图片的行。如何修复css以将其考虑在内？

我无法移除额外的 - 它通过反应注入。

Answer 1

鉴于上面的代码，您可以使用下面的目标进行定位，并制作额外的div显示表

.table > div:not(.table) {
  display: table;
}

https://jsfiddle.net/ktr6sa6y/1/

我在小提琴中添加了SCSS，如果你使用的是LESS，那么在这种情况下没有任何区别。

解决这个问题的最佳方法是在注入它时，只需给它表类，或者根本不注入div。也许反应需要注入它，我不确定我从未使用过反应

让css适用于所有孩子

1 个答案: