Question

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

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

这是我的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 {{ 1}}是表格，.divPartent和.divOne是.divTwo，它们允许内容彼此相邻。我做了js.fiddle if you want to see the code inaction。希望这有助于您走上正确的轨道。

如何对齐2个div而不会失去100％的宽度

1 个答案: