0

div「子」をdiv「親」内でドラッグおよびサイズ変更可能にし、それに含まれるようにしようとしています。
問題は、div の子のサイズを変更すると、div の親内の何かによってブロックされることです。
幅を最大にサイズ変更しようとすると、理解できます。
ドラッグ可能なオプションを削除すると、問題はなくなります。

問題を確認できるフィドルを次に示します:
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>

Jクエリ

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

});

divの「メニュー」を削除すると問題は解決しますが、withとheightを最大にサイズ変更すると、右隅と下に1pxのマージンが残ります。

4

1 に答える 1

0

問題は CSS と float にあります。フロートをコメントアウトしましたが、正常に動作します。

.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-06T21:46:15.860 に答える