Question

我正在尝试在表单上放置两个div。无论我尝试什么，我无法阻止第二个div的一方坚持到另一个。我需要它们并排放置，所以我将第一个div设置为float：left。我给第二个div加了一个醒目的蓝色边框，与第一个div相邻的一个边框是看不见的。

<div class=div-first>
    <div>
        <table >
            <tbody>
                <tr>
                    <th scope="col">Caller No</th>
                    <th scope="col">Call date</th>
                    <th scope="col">Call time</th>
                    <th scope="col">Answer mode</th>
                </tr>
                <tr>
                    <td>519202976</td>
                    <td>2013-11-13</td>
                    <td>16:03:28</td>
                    <td>Manual</td>
                </tr>
                <tr>
                    <td>125108094</td>
                    <td>2013-11-13</td>
                    <td>16:02:59</td>
                    <td>Manual</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="div-second" >
    <table>
        <tr>
            <td>Call date</td>
            <td>
                <asp:TextBox runat="server" ID="txtCallDate"></asp:TextBox>
            </td>
        </tr>
    </table>
</div>

CSS：

    .div-second{border:20px solid #0094ff;margin:30px;}

    .div-first{float: left; border:5px solid black}

Here's the jsfiddle。有什么想法吗？

Answer 1

你必须漂浮两个div。

.div-second{float:left; border:20px solid #0094ff;margin:30px;}

会将你的第二个div从第一个div移开。

在Chrome中按ctrl + shift + c并将鼠标移到蓝色边框上。它会告诉你第二个div实际发生了什么;它从你的第一个div开始一直延伸。

无法避免div的一侧粘在另一个div上

1 个答案: