1

だからここで何か奇妙なことが起こっています...私はテストのために私のdivに境界線を持っていたので、それらがどこで始まりどこで終わるかを見ることができました。境界線を削除すると、divの内容の1つが消え、理由がわかりません...

これが私のメインのhtmlファイルです

<!DOCTYPE html>
<html>
    <head>
        <title>EasyZag Admin</title>

        <!-- add the jQuery script -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <!-- add the jQWidgets framework -->
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
        <!-- add the css themes -->
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <link href="stylesheets/basic.css" media="all" rel="stylesheet" type="text/css" />
        <link href="jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div id='container'> 
            <div id="header">
                <div id='logo'>
                <img src="ezag_logo.jpeg" alt="eZag">
                </div>
                <script type="text/javascript">
                    $(document).ready(function () {
                        // Create a jqxMenu and set its width and height.
                        $("#jqxmenu").jqxMenu({ height: 30 , theme: 'darkblue'});
                        $("#main").height($('#container').height() - $('#header').height() - $('#footer').height() - 10);
                    });
                    $(window).resize(function() {
                        $("#main").height($('#container').height() - $('#header ').height() - $('#footer').height() - 10);
                    });
                </script>

                <div id='jqxmenu'>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li>Clients
                            <ul>
                                <li><a href="#">Add Client</a></li>
                                <li><a href="#">All Clients</a></li>
                                <li><a href="#">Search</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </div>
            </div><br />

            <div id="main">
                <?php
                    if(isset($_GET['section'])) {
                        //include which section
                    } else {
                        include "default.php";
                        echo "hello";
                    }
                ?>
            </div>

            <div id="footer">
                <center>Copyright 2012, EasyZag</center>
            </div>
        </div>
    </body>
</html>

そしてこれが私のCSSファイルです

body, html { height: 99%; width: 99%;}
div {position: relative; border: 1px dotted;}   

#container {width: 100%; height: 100%; background-color:#E8F4FF; border-radius:25px; border: solid; border-color: } 
#header { float: left; height: 80px; width: 100%; }
#logo {float: left; width: 225px; height: 70px; padding-left: 10px; padding-top: 10px;}
#jqxmenu {float: left; position: relative; top: 40px; left: 0px; }
#main {position: width: 100%; height: 50%; overflow: auto;}
#footer {float: left; width: 100%; position: absolute; bottom: 0;}

そして最後に、すべてのphpインクルードは次のとおりです。

Welcome to EasyZag Admin!<br />
<br />
Goals:<br />
<br />

div {position：relative;を変更する理由を誰かが知っていますか？border：1px dot;} To div {position：relative;}

私のcssファイルでは、phpが含まれているdivが完全に削除されますか？

ありがとう

4

2 に答える 2

0

透明度のある色で境界線を追加してみてください。

border: 1px dashed transparent;

1pxの境界線を使用したので、垂直方向と水平方向に2ピクセル余分にあることを意味します。つまり、境界線を削除すると。使用しているwidth = something場合、要素が以前の場所に配置されない可能性があります。

のようなものwidth: auto;を高さにも使用すると、要素はその新しい2ピクセルを使用するようになります。

透明色を使用するのは良い考えではないかもしれませんが、境界線が存在し、以前と同じように2ピクセル余分に使用していることを確認してください。ただし、透明です。背景色を使用している場合。cssをリファクタリングする方が良いかもしれません。

一方、要素がどこにあるかを確認するために、境界線の代わりに背景を使用することをお勧めします。

異なる色を設定すると、レイアウトを簡単に確認でき、背景色は要素のサイズに影響しません。

于 2012-07-14T22:08:03.143 に答える
0

#mainにエラーがあります-positionプロパティの値が含まれていません。

于 2012-07-14T22:12:34.530 に答える