使用 CSS 和 HTML 将父 Div 扩展到元素的宽度答案

【问题标题】：Expand Parent Div to width of Elements with CSS and HTML使用 CSS 和 HTML 将父 Div 扩展到元素的宽度
【发布时间】：2014-05-31 01:06:11
【问题描述】：

我目前正在为我的一个客户开发一个后端接口，但我遇到了难题。似乎 Internet Explorer（所有版本，包括 9 beta）和 Chrome 没有按需要显示页面。 Firefox 和 Safari 完美地显示了页面。我觉得它适用于 safari 但不适用于 chrome，这很奇怪。无论如何，这不是重点。

表单在 Safari 和 Firefox 中的外观 - 这是预期的结果：

表单在除 Safari 和 Firefox 之外的所有浏览器中的外观 - 这是不希望的：

我正在寻找一种方法来使背景扩展为在这些其他浏览器中的 css 中设置的宽度。任何提示和技巧都将不胜感激，因为我今天已经坚持了大约 5 个小时，这对我来说开始变得非常令人沮丧。

在一些帮助之后，我已经将问题缩小到 jQuery 插件“等高列”，但是我要求效果是有的，所以肯定有一种方法可以在其他浏览器中使其工作。

我的 HTML 是：

<head>
    <meta charset="UTF-8">
    <title>User Login</title>
    <link rel="shortcut icon" href="images/favicon.png" />
    <link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
    <link rel="stylesheet" href="stylesheets/styles.css" type="text/css" />
    <script src="javascript/jquery.js" type="text/javascript"></script>
    <script src="javascript/jquery.equalHeightColumns.js" type="text/javascript"></script>

    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="" />

    <script type="text/javascript">

        $(document).ready(function() {
            $("#form_left, #form_right, #form_right input").equalHeightColumns();

         });

    </script>

</head>

<body>

    <a href="forgot_password.html" class="loginmeta">Forgot Password?</a>

    <div id="container">

        <div id="header">
            <h1><a href="#">User Login</a></h1>
        </div>

        <div id="form">

            <form name="login" action="#" method="post">

                <div id="form_left">
                    <label for="">Username</label>
                    <input type="text" id="username" />

                    <label for="">Password</label>
                    <input type="password" id="password" />
                </div>

                <div id="form_right">
                    <input type="submit" name="submit" value="Log In" />
                </div>

                <div class="clear"></div>

            </form>

        </div>      

    </div>  

</body>

和 CSS：

//*
TYPE
*/
a.loginmeta                 { position: absolute; 
                          right: 20px; top: 20px; 
                          color: #4a4f5b; 
                          font-size: 12px; }
a.loginmeta:hover           { color: #5d6472; }

/*
    STRUCTURE   
*/
body                        { background:         url('../images/page_background.png') repeat; }
#container                  { width: 480px; display: block;
                          margin: 100px auto 0 auto; }

/*
    FORM
*/      

form                        { width: 480px; margin: 30px 0 15px     0; }

form label                  { color: #919191;
                          text-transform: uppercase;
                          display: block;
                          margin-bottom: 10px; }

form input                  { background: #ffffff;
                          border: 1px solid #d1d1d1;
                          font-size: 17px;
                          color: #414141;
                          padding: 10px; margin-bottom: 10px; 
                          width: 328px; }

#form_left, #form_right     { -webkit-border-radius: 5px;
                          -moz-border-radius: 5px;
                          border-radius: 5px;
                          -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
                          -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
                          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
                           }

#form_left                  { float: left;
                          width: 350px; 
                          background: url('../images/form_background.png') repeat-x bottom left #f3f3f3;
                          padding: 20px 20px 10px 20px; }

#form_right                 { float: right;
                          background: url('../images/form_background.png') repeat-x bottom left #f3f3f3; padding-bottom: 30px; }

#form_right input           { width: 80px;
                          font-size: 12px;
                          text-transform: uppercase;
                          color: #939393;
                          background: none;
                          border: none;
                          margin: 15px 0;
                          padding: 0; }                           



***

谢谢！

【问题讨论】：

在 IE8、FF3 和 Chrome10 中看起来相同：jsfiddle.net/jomanlk/FYGeZ
谢谢队友，我忘了补充说我在页面中使用了一个 jQuery 插件“等高列”——我已将它添加到原始帖子的代码中。在您的帮助下，我缩小了导致 IE 和 Chrome 出现问题的插件的范围。太令人沮丧了！
您是否尝试过在 FF 中使用 Firebug 来阐明所有内容都具有您期望的宽度和填充尺寸？

标签： html css width expand

【解决方案1】：

我不知道这是否有帮助，但由于您的问题似乎来自插件，也许您可以试试这个：

var columnMaxHeight = 0;
$("COLUMN_SELECTOR").each(function() {
    var columnHeight = $(this).height();
    if (columnMaxHeight < columnHeight) {
        columnMaxHeight = columnHeight;
        $(this).height(columnMaxHeight);
    }
});

【讨论】：