如何在不损失 100% 宽度的情况下对齐 2 个 div

Question

我想要做的是并排对齐 2 个 div，第一个 div 包含一些文本，另一个包含一个 html 表格。

我的问题是有没有办法将 2 个 div 并排放置而不超过容器宽度？

这是我的 html 和 css 代码：

HTML：

<table class="table table-curved">
<thead>
    <tr>
        <th>Mail</th>
        <th>Queued</th>
        <th>Delivered</th>
        <th>Bounced</th>
        <th>Complaints</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><span class="title">alfa beta</span>
        </td>
        <td>295,063</td>
        <td>201,896</td>
        <td>94,023</td>
        <td>201,896</td>

    </tr>
    <tr>
        <td><span class="title">gama phy</span>
        </td>
        <td>634,235</td>
        <td>500,321</td>
        <td>94,023</td>
        <td>135,456</td>
    </tr>
    <tr>
        <td colspan="15">
            <div style="margin-top:15px">
                <div>|__</div>
                <table class="table table-curved">
                    <thead>
                        <tr>
                            <th>ISP</th>
                            <th>Queued</th>
                            <th>Delivered</th>
                            <th>Bounced</th>
                            <th>Complaints</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span class="title">lookup</span>
                            </td>
                            <td>295,063</td>
                            <td>201,896</td>
                            <td>94,023</td>
                            <td>135,456</td>
                        </tr>
                        <tr>
                            <td><span class="title">deny</span>
                            </td>
                            <td>295,063</td>
                            <td>201,896</td>
                            <td>94,023</td>
                            <td>201,896</td>
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
</tbody>

CSS：

<style>
    .table-curved {
        border-collapse: separate;
        font-size: 11px;
    }
    .table-curved button{
        font-size: 9px;
    }
    .table-curved {
        border: solid #ccc 1px;
        border-radius: 6px;
        border-left:0px;
    }
    .table-curved>thead>tr>th{
        border-bottom: 0!important;
        background-color: #E7F7FF;
    }
    .table-curved td, .table-curved th {
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        padding: 5px!important;
    }
    .table-curved th {
        border-top: none;
    }
    .table-curved th:first-child {
        border-radius: 6px 0 0 0;
    }
    .table-curved th:last-child {
        border-radius: 0 6px 0 0;
    }
    .table-curved th:only-child{
        border-radius: 6px 6px 0 0;
    }
    .table-curved tr:last-child td:first-child {
        border-radius: 0 0 0 6px;
    }
    .table-curved tr:last-child td:last-child {
        border-radius: 0 0 6px 0;
    }
    .tree{
        display: inline-block; vertical-align: top;
    }
    .nested-table{
        position: relative;
        top: -15px;
        right: 20px;
    }
</style>

这是一个显示问题的图像：

Answer 1

是的，这是可能的。使用您的代码，我添加了这个 CSS：

.box {
  max-width: 400px;
}
.divParent {
  display: table;
  margin-top: 15px;
  width: 100%;
}
.divOne, .divTwo {
  background: lightgreen;
  display: table-cell;
  vertical-align: top;
}
.divTwo {
  background: lightblue;
}

并稍微修改了您的 HTML：

<div class="box">
    <table class="table table-curved">
    <thead>
        <tr>
            <th>Mail</th>
            <th>Queued</th>
            <th>Delivered</th>
            <th>Bounced</th>
            <th>Complaints</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="title">alfa beta</span>
            </td>
            <td>295,063</td>
            <td>201,896</td>
            <td>94,023</td>
            <td>201,896</td>
        </tr>
        <tr>
            <td><span class="title">gama phy</span>
            </td>
            <td>634,235</td>
            <td>500,321</td>
            <td>94,023</td>
            <td>135,456</td>
        </tr>
        <tr>
            <td colspan="15">
                <div class="divParent">
                    <div class="divOne">|_</div>
                    <div class="divTwo">
                        <table class="table table-curved">
                            <thead>
                                <tr>
                                    <th>ISP</th>
                                    <th>Queued</th>
                                    <th>Delivered</th>
                                    <th>Bounced</th>
                                    <th>Complaints</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><span class="title">lookup</span>
                                    </td>
                                    <td>295,063</td>
                                    <td>201,896</td>
                                    <td>94,023</td>
                                    <td>135,456</td>
                                </tr>
                                <tr>
                                    <td><span class="title">deny</span>
                                    </td>
                                    <td>295,063</td>
                                    <td>201,896</td>
                                    <td>94,023</td>
                                    <td>201,896</td>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
    </table>
</div>

如你所见，我添加了一个名为.box 的父容器来封装你所有的表格代码，只是为了设置一个特定的宽度（你可以删除这个）然后有3个div.divPartent是表格而.divOne 和.divTwo 是table-cells，它们允许内容并排放置。我做了一个js.fiddle if you want to see the code inaction。希望这可以帮助您走上正轨。