父分区内有两个div（它们之间有一个空格）

debugcn 发表于 Dev

卢卡斯·马洛丁·德·帕瓦

在我提供的示例中，红色框是父div，我希望其中的其他两个div具有相同的宽度，它们之间的间距为10px。我怎样才能做到这一点？

这两个div中的变量是动态的，但我希望它们的宽度相等。我还希望两个div的总和更多10px等于父div宽度。

<div style="display: table; width: 100%; float:left; border-style: solid; border-color:red; border-width: 1px;">
  <div style="display: table-cell; background-color:white; border-style: solid; border-color:#EAEAEA; border-width: 1px; float: left;">
    <div style="width: 100%; background-color:#EAEAEA; text-align:left; color:#555;font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:160%;text-align:justify;">
      <div style="padding-left: 9px;">
        <b>Informações de cobrança:</b>
      </div>
    </div>
    <div style="width: 100%; background-color:none; float:left;">
      <div style="text-align:left; font-family:Helvetica, Arial, sans-serif; font-size:12px; padding:7px 9px 9px 9px;">
        {{var order.getBillingAddress().format('html')}}
      </div>
    </div>
  </div>
  <div style="display: table-cell; margin-left:10px; background-color:white; border-style: solid; border-color:#EAEAEA; border-width: 1px; float: left;">
    <div style="width: 100%; background-color:#EAEAEA; text-align:left; color:#555;font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:160%;text-align:justify;">
      <div style="padding-left: 9px;">
        <b>Informações de entrega:</b>
      </div>
    </div>
    <div style="width: 100%; background-color:none; float:left;">
      <div style="text-align:left; font-family:Helvetica, Arial, sans-serif; font-size:12px; padding:7px 9px 9px 9px;">
        {{var order.getShippingAddress().format('html')}}
      </div>
    </div>
  </div>
</div>

马克·奥德（Marc Audet）

您使用CSS表格（display: table）有正确的主意。

但是，您无需float在此布局中使用。

这是一个概念证明的例子。

应用于display: table父容器和display: table-cell三个子容器div。

设置.spacer元素的宽度。.column然后，这两个元素将自动调整大小以占据表格宽度的剩余宽度。

注意：您可以根据需要将CSS规则转换为内联样式。

.table-wrapper {
  display: table;
  width: 100%;
}
.table-wrapper .column, .table-wrapper .spacer {
  display: table-cell;
}
h2 {
  background-color: lightgray;
  text-align: center;
}
.table-wrapper .spacer {
  width: 10px;
}

<div class="table-wrapper">
  <div class="column">
    <h2>Your 1st Header</h2>
    <p>Some content...</p>
  </div>
  <div class="spacer"></div>
  <div class="column">
    <h2>Your 2nd Header</h2>
    <p>Some more content...</p>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。