我有两个内联的div和一个比它们更大的div。每个div都有类box，并随着div中的内容而增长。
所以，这就是我想要实现的目标：
如果两个顶部div的宽度（包括中间的边距）比底部div宽，则将底部div的边缘设置为与顶部的外边缘对齐的div。
如果底部div较大，则设置顶部div的外侧以与其边缘对齐。
HTML：
<div class="wrapper">
<div 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>
</div>
<div class="box">
<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>
</div>
<div class="wrapper">
<div class="box">
<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>
</div>
</div>
CSS：
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;
}
我可以用css做这个吗？或者是否有必要使用javascript？
可能在jQuery中做一些事情（不考虑边际）：
$(document).ready(function() {
var widthLeft = $("//TopDivLeft").width();
var widthRight = $("//TopDivRight").width();
var width = widthLeft + widthRight;
$("//BottomDiv").css({
'width': (width + 'px')
});
});
但是可以用CSS做到这一点吗？
答案 0 :(得分：-1)
我修改了你的codepen，所以它使用一个表来布局。这是否按照你想要的方式工作？
http://codepen.io/anon/pen/GooEzv
以下是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>