在CSS中将子div与另一个父级的子div对齐？

Question

我有以下生成的html：

＆＃13;

＆＃13;

<div id="renderProduct1_control4">

  <!-- product description -->
  <div id="renderProduct1_identifierContainer">
    <div id="renderProduct1_identifier">Russell Hobbs Pennine 20444 Illuminating Kettle</div>
  </div>

  <div id="renderProduct1_control5">

    <!-- product sku -->
    <div id="renderProduct1_searchkey">RH2309574</div>

    <!-- product unit of measure -->
    <div id="renderProduct1_uom">Each</div>

    <!-- product price -->
    <div id="renderProduct1_priceBox">
      <div id="renderProduct1_control6">
        <div id="renderProduct1_price">£23.55</div>
      </div>
    </div>

    <!-- product brand name or series -->
    <div id="renderProduct1_series">Russell Hobbs</div>

    <!-- product manufacturer part number -->
    <div id="renderProduct1_brandcode">4008496875092</div>

    <!-- product in stock quantity -->
    <div id="renderProduct1_stock">14</div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

我正在努力实现以下目标：

但是我找不到任何地方可以给我一个例子来说明如何对待孩子＆＃34;产品标识符＆＃34;与孩子（来自另一位家长）＆＃34; searchkey＆＃34;。

我的问题是这是否可能，因为html已经为我生成了，而且我没有选择改变它。

谢谢！

Answer 1

多么糟糕的任务......表格数据的标记应该是一个HTML表格..但无论如何，你可以用CSS网格和真正特定的内容放置来伪造它。

为了处理不同div上的元素，您可以采用两种不同的方法：最合乎逻辑的方法是使用display：contents，这样不需要的容器就不会影响网格流，但这会导致主要的浏览器兼容性问题。 另一个，可能是最好的，将使用两个相同的表格，并用绝对定位覆盖另一个：

＆＃13;

＆＃13;

#renderProduct1_control4{
  position:relative;
}

#renderProduct1_identifierContainer{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr 1fr;
  position:absolute;
  top:0; left:0;
  width:100%;
}

#renderProduct1_identifier{
  grid-row:1; grid-column: 2 / span 4;
}


#renderProduct1_control5{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr 1fr;
}


#renderProduct1_searchkey{
  grid-row:1; grid-column:1;
}

#renderProduct1_series{
  grid-row:2; grid-column:1;
}

#renderProduct1_brandcode{
  grid-row:2; grid-column:2;
}

#renderProduct1_uom{
  grid-row:2; grid-column:3;
}

#renderProduct1_stock{
  grid-row:2; grid-column:4;
}

#renderProduct1_priceBox{
  grid-row:2; grid-column:5;
}

＆＃13;

<div id="renderProduct1_control4">

  <!-- product description -->
  <div id="renderProduct1_identifierContainer">
    <div id="renderProduct1_identifier">Russell Hobbs Pennine 20444 Illuminating Kettle</div>
  </div>

  <div id="renderProduct1_control5">

    <!-- product sku -->
    <div id="renderProduct1_searchkey">RH2309574</div>

    <!-- product unit of measure -->
    <div id="renderProduct1_uom">Each</div>

    <!-- product price -->
    <div id="renderProduct1_priceBox">
      <div id="renderProduct1_control6">
        <div id="renderProduct1_price">£23.55</div>
      </div>
    </div>

    <!-- product brand name or series -->
    <div id="renderProduct1_series">Russell Hobbs</div>

    <!-- product manufacturer part number -->
    <div id="renderProduct1_brandcode">4008496875092</div>

    <!-- product in stock quantity -->
    <div id="renderProduct1_stock">14</div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;