Question

我正在尝试在主要内容页面上方添加矩形图像（类似于添加导航栏）。主内容页面可以通过'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>

感谢任何帮助！

Answer 1

编辑：我很抱歉你想要反其道而行之。我在下面修改了我的帖子：

如果你想要一个动态的方法来获取Javascript的宽度，你可以简单地调用document.getElementById（＆＃34; mainContainer＆＃34;）。style.width或document.getElementById（＆＃34; mainContainer＆＃34 ;）。style.offsetWidth如果第一个不起作用。并将navBar的style.width设置为等于。

请注意，虽然你使用jpg作为导航栏，但根据桌子的宽度，它看起来会变形。

Answer 2

将navBar和mainContainer包裹在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。

Answer 3

窃取马修的小提琴，你只需拥有容器的大小，然后将左/右边距设置为自动。

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

调整导航栏的大小以使其与内容框具有相同的宽度

3 个答案: