無法避免一個div粘在另一個div上

我試圖在窗體上放置兩個div。無論我嘗試什麼，我都無法阻止第二個div的一邊粘到另一邊。我需要他們保持並排，所以我已經設置了第一個浮動：左。我給第二個div一個大膽的藍色邊框，並且與第一個div相鄰的一個邊框是不可見的。無法避免一個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。任何想法爲什麼？

來源

2013-11-27 Mikayil Abdullayev

http://jsfiddle.net/9A9s5/1/ – Abhitalks

對不起，@ abhitalks，我忘了更新小提琴。 –

我的意思是通過那個小提琴傳達的是，你需要'div-first'上的適當寬度和裏面的表格。否則你的'浮動'將不起作用。 – Abhitalks

你必須浮動兩個div。

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

將移動您的第二個div從第一個。

在Chrome中按下ctrl + shift + c並將鼠標移到藍色邊框上。它會告訴你實際發生了什麼第二個div;它從你的第一個分區一直延伸下來。

來源

2013-11-27 08:55:57 Chris

謝謝@ Chris，它真的有用。我沒有嘗試過，因爲我已經多次完成相同的事情，而沒有divs彼此重疊。 –

無法避免一個div粘在另一個div上

回答

相關問題