html - 如何对齐div容器和表格

Question

我一直在尝试以某种方式布置我的表格和 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>

Answer 1

您可以对 div width 20% 使用 float left，它适用于普通浏览器而不是代码片段。

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>