Jquery 将div的宽度设置为更宽的div

我有两个直列的div，下面有一个更大的div。每个div都有类

框

，并随着div中的内容而增长

因此，以下是我试图实现的目标：

如果两个顶部div的宽度（包括中间的边距）比底部div宽，则将底部div的边缘设置为与顶部div的外侧对齐

如果底部div较大，则将顶部div的向外侧设置为与其边缘对齐

HTML:

我可以只用css来做这件事吗…还是有必要使用javascript

可能会在jQuery中执行以下操作（不考虑保证金）：

---

但是仅仅用CSS就可以做到这一点吗？

我修改了你的代码笔，使它使用一个表格来布局东西。这是你想要的方式吗

以下是html的变化：

<table>
    <tr class="wrapper">
        <td class="box">
           <h1>Transactions</h1>
           <p>as of the date 12/14/2015</p>
           <hr>
           <table>
              <thead>
                 <tr>
                    <th>Transaction Type</th>
                    <th># Transactions</th>
                    <th>Amount</th>
                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <td>Cash</td>
                    <td>0</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td>Check</td>
                    <td>0</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td>Credit</td>
                    <td>0</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td><b>Total Sales</b></td>
                    <td><b>0</b></td>
                    <td>$0.00</td>
                 </tr>
              </tbody>
           </table>
        </td>
        <td class="margin"></td>
        <td class="box full-width" colspan="3">
           <h1>Monthly Top 10 Product Sales - Dec</h1>
           <p>as of the date 12/14/2015</p>
           <hr>
           <table>
              <thead>
                 <tr>
                    <th>Item Name</th>
                    <th>Qty Sold</th>
                    <th>Total Sales</th>
                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <td>Product 1</td>
                    <td>1</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td>Product 2</td>
                    <td>2</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td>Product 3</td>
                    <td>3</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td>Product 4</td>
                    <td>4</td>
                    <td>$0.00</td>
                 </tr>
              </tbody>
           </table>
        </div>
     </td>
    </tr>

    <tr class="wrapper">
        <td class="box" colspan="3">
           <h1>Annual Sales</h1>
           <hr>
           <table>
              <thead>
                 <tr>
                    <th>Email(s)</th>
                    <th>Merchant ID</th>
                    <th>Gateway ID</th>
                    <th>Bus. Name</th>
                    <th>Devices</th>
                    <th>Transactions</th>
                    <th>Date Created</th>
                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <td>test@xx.com</td>
                    <td>12345</td>
                    <td>54321</td>
                    <td>Test Business</td>
                    <td>Apple</td>
                    <td></td>
                    <td></td>
                 </tr>
                 <tr>
                    <td>test@xx.com</td>
                    <td>12345</td>
                    <td>54321</td>
                    <td>Test Business</td>
                    <td>Apple</td>
                    <td></td>
                    <td></td>
                 </tr>
                 <tr>
                    <td>test@xx.com</td>
                    <td>12345</td>
                    <td>54321</td>
                    <td>Test Business</td>
                    <td>Apple</td>
                    <td></td>
                    <td></td>
                 </tr>
                 <tr>
                    <td>test@xx.com</td>
                    <td>12345</td>
                    <td>54321</td>
                    <td>Test Business</td>
                    <td>Apple</td>
                    <td></td>
                    <td></td>
                 </tr>
                 <tr>
                    <td>test@xx.com</td>
                    <td>12345</td>
                    <td>54321</td>
                    <td>Test Business</td>
                    <td>Apple</td>
                    <td></td>
                    <td></td>
                 </tr>
              </tbody>
           </table>
        </td>
     </tr>
  </table>

交易
截至2015年12月14日


交易类型
#交易
数量
现金
0
$0.00
检查
0
$0.00
信用
0
$0.00
总销售额
0
$0.00
每月前十大产品销售额-12月
截至2015年12月14日


项目名称
售出数量
总销售额
产品1
1.
$0.00
产品2
2.
$0.00
产品3
3.
$0.00
产品4
4.
$0.00
年销售额

电邮
商户ID
网关ID
公共汽车名称
装置
交易
创建日期
test@xx.com
12345
54321
测试业务
苹果
test@xx.com
12345
54321
测试业务
苹果
test@xx.com
12345
54321
测试业务
苹果
test@xx.com
12345
54321
测试业务
苹果
test@xx.com
12345
54321
测试业务
苹果

您可以将所有内容放在一个div中，并将底部的div宽度设置为父div宽度。是的，我可以。但是，我怎样才能在顶级div之间保持相同的间距，而只是扩大div？使用tables，或者使用display:table、display:table row和display:table cell，这绝对是可行的，而不是这样做，然后左右浮动顶部div。第一行将有3个单元格。第一个单元格中的事务。一个空的单元格，宽度固定在中间。然后Monthyl在右边的单元格中排名前10。第二行，您放置一个列跨度为3的单元格，并将年销售额放在其中。有意义吗？为什么有两个斜杠（

/

）作为选择器？你不应该使用id选择器（

#

）吗？为了示例起见，请给出一个注释，因为我在每个id选择器上都没有唯一的选择器。是的，这就可以了。谢谢我唯一要添加的是在表的最后一行之前添加一个额外的空行<代码>然后是

.margin height{height:30px；}

这样我就可以得到那个边距。对于否决答案的人，你至少可以解释一下为什么你否决了它。

body{
    background-color: #F5F5F5;
    font-family: sans-serif;
}
table{
    margin: 0 auto;
}
.wrapper{
    display: flex;
    justify-content: center;
}
.box {
  background-color: #fff;
  margin: 1%;
  padding: 30px !important;
  border: 1px solid #dfe8f1;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}
.box h1 {
  font-size: 24px;
  margin: 0;
  padding: 0;
  margin-bottom: 12px;
}

$(document).ready(function() {
  var widthLeft = $("//TopDivLeft").width();
  var widthRight = $("//TopDivRight").width();
  var width = widthLeft + widthRight;

  $("//BottomDiv").css({
    'width': (width + 'px')
  });
});

<table>
    <tr class="wrapper">
        <td class="box">
           <h1>Transactions</h1>
           <p>as of the date 12/14/2015</p>
           <hr>
           <table>
              <thead>
                 <tr>
                    <th>Transaction Type</th>
                    <th># Transactions</th>
                    <th>Amount</th>
                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <td>Cash</td>
                    <td>0</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td>Check</td>
                    <td>0</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td>Credit</td>
                    <td>0</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td><b>Total Sales</b></td>
                    <td><b>0</b></td>
                    <td>$0.00</td>
                 </tr>
              </tbody>
           </table>
        </td>
        <td class="margin"></td>
        <td class="box full-width" colspan="3">
           <h1>Monthly Top 10 Product Sales - Dec</h1>
           <p>as of the date 12/14/2015</p>
           <hr>
           <table>
              <thead>
                 <tr>
                    <th>Item Name</th>
                    <th>Qty Sold</th>
                    <th>Total Sales</th>
                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <td>Product 1</td>
                    <td>1</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td>Product 2</td>
                    <td>2</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td>Product 3</td>
                    <td>3</td>
                    <td>$0.00</td>
                 </tr>
                 <tr>
                    <td>Product 4</td>
                    <td>4</td>
                    <td>$0.00</td>
                 </tr>
              </tbody>
           </table>
        </div>
     </td>
    </tr>

    <tr class="wrapper">
        <td class="box" colspan="3">
           <h1>Annual Sales</h1>
           <hr>
           <table>
              <thead>
                 <tr>
                    <th>Email(s)</th>
                    <th>Merchant ID</th>
                    <th>Gateway ID</th>
                    <th>Bus. Name</th>
                    <th>Devices</th>
                    <th>Transactions</th>
                    <th>Date Created</th>
                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <td>test@xx.com</td>
                    <td>12345</td>
                    <td>54321</td>
                    <td>Test Business</td>
                    <td>Apple</td>
                    <td></td>
                    <td></td>
                 </tr>
                 <tr>
                    <td>test@xx.com</td>
                    <td>12345</td>
                    <td>54321</td>
                    <td>Test Business</td>
                    <td>Apple</td>
                    <td></td>
                    <td></td>
                 </tr>
                 <tr>
                    <td>test@xx.com</td>
                    <td>12345</td>
                    <td>54321</td>
                    <td>Test Business</td>
                    <td>Apple</td>
                    <td></td>
                    <td></td>
                 </tr>
                 <tr>
                    <td>test@xx.com</td>
                    <td>12345</td>
                    <td>54321</td>
                    <td>Test Business</td>
                    <td>Apple</td>
                    <td></td>
                    <td></td>
                 </tr>
                 <tr>
                    <td>test@xx.com</td>
                    <td>12345</td>
                    <td>54321</td>
                    <td>Test Business</td>
                    <td>Apple</td>
                    <td></td>
                    <td></td>
                 </tr>
              </tbody>
           </table>
        </td>
     </tr>
  </table>