如何对齐 div 容器和表格答案

【问题标题】：how to align div containers and table如何对齐 div 容器和表格
【发布时间】：2019-06-28 15:04:23
【问题描述】：

我一直在尝试以某种方式布局我的 table 和 div 容器。

所以右侧的 div 容器（每个容器在彼此下方）容器旁边的表格和所有内容居中。我尝试过使用 align: right 但它不起作用。不知道我还能做什么。

 <div  style="width: 20%; ">           
        <table class="table table-bordered" >
            <thead>
            <tr>
                <th>Created/Placed</th>
                <th>Req./Actual Delivery Date</th>
                <th>Supplier</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>

    <div id="widget" class="well well-large" style="width: 20%">
            <ul>
                <br>
                <li> orders</li>
                <li> orders</li>
            </ul>
        </div>
    <div class="well well-large" style=" width:20%">
        <ul>
            <br>
            <li> orders</li>
            <li> orders</li>
        </ul>
    </div>
    <div class="well well-large" style=" width:20%">
        <ul>
            <br>
            <li> orders</li>
            <li> orders</li>
        </ul>
    </div>
    </div>

【问题讨论】：

你应该将你的 CSS 添加到问题中
我没有css，我只是在html中添加了style=""。我知道这不是正确的方法，但这只是我试图弄清楚布局
你使用引导程序吗？
您可以做的一个非常基本的事情是使用float: left 让所有的 div 都尝试向左并堆叠在一起。您还应该检查任何padding 或margins，因为这可能会占用一些额外空间并无意中将内容移到下一行
您在代码末尾添加了</div>！

标签： html css widget containers

【解决方案1】：

您可以将float left 用于 div width 20%，它适用于普通浏览器而不是代码 sn-p。

div{
float:left;
}

div{
float:left;
}

<div  style="width: 20%; ">           
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>Created/Placed</th>
                <th>Req./Actual Delivery Date</th>
                <th>Supplier</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>

    <div id="widget" class="well well-large" style="width: 20%">
            <ul>
                <br>
                <li> orders</li>
                <li> orders</li>
            </ul>
        </div>
    <div class="well well-large" style=" width:20%">
        <ul>
            <br>
            <li> orders</li>
            <li> orders</li>
        </ul>
    </div>
    <div class="well well-large" style=" width:20%">
        <ul>
            <br>
            <li> orders</li>
            <li> orders</li>
        </ul>
    </div>
    </div>

【讨论】：