jQuery的用戶界面可調整大小與可拖動的錯誤

我想要一個div「孩子」是可拖動和可調整大小裏面的一個div「父母」幷包含它。
問題是，當我調整我的div孩子時，它被我的div父母內部的東西阻塞。
如果你嘗試調整它的寬度到最大值，你會明白。
如果我刪除可拖動選項，問題消失。jQuery的用戶界面可調整大小與可拖動的錯誤

這裏是一個小提琴在這裏你可以看到問題：
JSFIDDLE

CSS

html, body, div { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; line-height:100%;} 

.page_container{ width: 100%; height: 100%; position: relative; display: } 
.main{ width: 800px; display: block; float: left; padding: 20px;} 

.menu{ width: 200px; height: 700px; display: block; float: left; background-color: gray;} 
.menu a{ color: black;} 
.menu a:hover{ color: white;} 

#parent{ width: 800px; height: 600px; display: block; border: solid 1px gray; padding: 0px;} 
#child{ width: 100px; height: 100px; display: block; border: solid 2px gray; cursor: move;}

HTML

<div class="menu"> 
    <ul>Templates 
     <li><a href="template_add.php">Criar Novo</a></li> 
     <li><a href="#">Categoria</a></li> 
     <li><a href="#">Listar Templates</a></li> 
    </ul> 
    <ul>Slides 
     <li><a href="#">Criar Novo</a></li> 
     <li><a href="#">Categoria</a></li> 
     <li><a href="#">Listar Slides</a></li> 
    </ul> 
    <ul>Slideshows 
     <li><a href="#">Criar Novo</a></li> 
     <li><a href="#">Categoria</a></li> 
     <li><a href="#">Listar Slideshows</a></li> 
    </ul> 
</div> 
<div class="page_container"> 
    <?php include 'includes/menu.php' ?> 
    <div class="main"> 
     <div id="parent"> 
      <div id="child"></div> 
     </div> 
    </div> 
</div>

JQUERY

$(function() { 
$("#child").resizable({ containment: "#parent", maxHeight: 600, maxWidth: 800, minHeight: 10, minWidth: 10 }); 
$("#child").draggable({ containment: "#parent", scroll: true }); 

});

如果我刪除我的div「菜單」，問題就解決了，但是，當我調整with和height到最大值時，右下角和底部仍有1px的餘量。

來源

2013-08-06 CIRCLE

改變你的CSS來'。菜單{width：200px; height：400px;'這樣比較好，但是'display：}'在那裏做什麼？ –

謝謝@Mark Schultheiss，我已經更新了我的jsfiddle。當我調整寬度並調整到最大值時，如何刪除右側和底部的1px邊距？ – CIRCLE

問題在於你的CSS和浮動。我評論了漂浮，它工作正常。

.menu{ width: 200px; height: 700px; display: block; /*float: left;*/ background-color: gray;}

如果你想浮動，你也可以讓高度「自動設置」本身。是否有一個高度爲700px的理由？

.menu{ width: 200px; /*height: 700px;*/ display: block; float: left; background-color: gray;}

也擺脫：

display:

http://jsfiddle.net/alutz33/btrP3/

此鏈接包括有關邊境問題的新的要求：

http://jsfiddle.net/alutz33/rz4qw/

來源

2013-08-06 21:46:15 alutz33

謝謝@ alutz33，我刪除了所有的顯示和浮動，並且運行良好，但是當我調整到最大寬度和高度時，仍然有1px的餘量。你有什麼想法可能造成這種情況？ – CIRCLE

檢查更新jsfiddle：http://jsfiddle.net/alutz33/rz4qw/你不需要'遏制：「#parent」'我改變了最大尺寸來反映你的邊框寬度。 – alutz33

我查過了，但是仍然和你在帖子中鏈接的第一張相同 – CIRCLE

jQuery的用戶界面可調整大小與可拖動的錯誤

回答

相關問題