0

我正在尝试在主内容页面上方添加一个矩形图像（类似于添加导航栏）。主要内容页面可以通过 'mainContainer' 来识别，而矩形图像可以在 'navBar' 内部来识别。这里有一个问题：我希望导航栏（或矩形图像）与“mainContainer”或内容页面的宽度相同。CSS代码部分是：

#navBar
    {
        background-image:url('images/Register/navbar.jpg');
        opacity:0.8; filter: alpha(opacity=80);     
        height:38px;
        border:solid 1px black;
        background-repeat:repeat-x;

    }

这是主页编码的一部分。

<body>      
    <table id="mainContainer" align="center"> 
    <tr>
        <td>
            <form action="Register.php" method="post" id="standardsize">
                <table>

                <tr>
                    <td colspan="2" id="largesize"><img src="images/Register/sign up today.png"/></td>
                </tr>

                <tr>
                    <td><input type="text" name="name" maxlength="30" value="<?php echo "$name";?>" /></td>
                    <td><img src="images/Register/whats your name.png"/></td>
                </tr>

                <tr>
                    <td><input type="text" name="newuser" maxlength="20" value="<?php echo "$newid";?>""/></td>
                    <td><img src="images/Register/username.png"/></td>
                </tr>

                <tr>
                    <td><input type="text" name="email" maxlength="20" /></td>
                    <td><img src="images/Register/email.png"/></td>
                </tr>

                <tr>
                    <td><input type="password" name="newpass" value="" maxlength="20"/></td>
                    <td><img src="images/Register/password.png" /></td>
                </tr>

                <tr>
                    <td><input type="password" name="verifynewpass" name="verifypass" value="" maxlength="20"/></td>
                    <td><img src="images/Register/retypepassword.png"/></td>
                </tr>

                <tr>
                    <td colspan="2">
                        <!--Signup submit button-->     
                        <input type="image" src="images/Register/sign up2.png" />
                    </td>
                </tr>
                </table>
            </form>
        </td>
        <td>
            <!--AFRICAN PIC-->
            <div class="rigthPanel">


            </div>
        </td>
        </tr>

    </table>

任何帮助表示赞赏！

4

3 回答 3

0

窃取 Matthew 的小提琴，您只需要为容器设置一个大小，然后将左/右的边距设置为自动。

http://jsfiddle.net/USWzB/3/

于 2012-08-22T03:00:42.353 回答
0

编辑：我很抱歉你想要相反的。我在下面修复了我的帖子：

如果您想要使用 Javascript 获取宽度的动态方式，您可以简单地调用 document.getElementById("mainContainer").style.width 或 document.getElementById("mainContainer").style.offsetWidth 如果第一个没有工作。并将导航栏的 style.width 设置为等于该值。

请注意，由于您使用 jpg 作为导航栏，它看起来会根据您的表格宽度而变形。

于 2012-08-21T18:18:04.023 回答
0

navBar将和都包裹mainContainer在 a 中div，然后将其浮动，div使其仅扩展至足以包含mainContainer.

（小提琴：http: //jsfiddle.net/USWzB/2/）

标记：

<div id="wrap">
    <div id="navBar">Here's the nav</div>
    <div id="mainContainer">
        This content is wider than navBar's, so navBar will have to expand.
    </div>
</div>

CSS：

#wrap { float: left; } /* so it is only as wide as mainContainer */

这假设mainContainer总是比 更宽navBar。

于 2012-08-21T18:36:50.217 回答