Question

在我提供的示例中，红色框是父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>

Answer 1

您有正确的想法使用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>

父母一个内部的两个div（它们之间有空格）

1 个答案: