Question

我在页面的一部分中有以下div结构。当页面呈现时，我看到contentDiv的宽度小于texArea元素的宽度。当我在Chrome的开发者工具中查找元素时，contentDiv的宽度为239像素，即使textArea的宽度为550像素。

问题：当外部div没有提到宽度和高度的样式时，为什么外部div不占用其内容的宽度，以及如何确保外部div总是更大比内部div尺寸？

<div id="contentDiv">
 <asp:Label ID="lblCodeType" runat="server" Font-Bold="true" Font-Size="Large"></asp:Label>
   <div>
    <asp:TextBox ID="txtCode" runat="server" TextMode="MultiLine" Rows="15" Width="550" Height="500" Font-Size="Small" Font-Names="consolas,sans-serif"></asp:TextBox>
       <div id="runCode" style="width:80%"">
                    <input type="button" value="Run above code" onclick="runCode(); return false;" id="btnRunCode" /><br />
                    (NOTE: Uncomment the code that you want to run, and comment what you don't want to run. DO NOT run multiple popup code at the same time; for example do not uncomment radalert as well as radconfirm code before running the code, but only have either radalert or radconfirm uncommented.)
        </div>
  </div>
</div>

更新1

外部div的父级的CSS如下所示。

element.style {
    height: 516.667px;
}
div#radWindow1_C {
}
.RadWindow_MetroTouch .rwContent {
    background-color: #fff;
    border: 0;
}
.RadWindow .rwContent {
    padding: .41667em .83333em;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
}
user agent stylesheetdiv {
    display: block;
}

更新2

经过一番研究，我想出了两个解决方案。我无法弄清楚为什么CSS会以这种方式表现（可能是因为这个ASP.Net页面中的其他元素/ div的许多CSS规则的复杂应用），但这两个解决方案中的任何一个都解决了我的问题。

解决方案1 ：contentDiv需要像表格或表格行或表格单元格一样显示，即display CSS属性需要为table或table-row或table-cell。

<div id="contentDiv" style="display:table">
 <asp:Label ID="lblCodeType" runat="server" Font-Bold="true" Font-Size="Large"></asp:Label>
   <div>
    <asp:TextBox ID="txtCode" runat="server" TextMode="MultiLine" Rows="15" Width="550" Height="500" Font-Size="Small" Font-Names="consolas,sans-serif"></asp:TextBox>
       <div id="runCode" style="width:80%"">
                    <input type="button" value="Run above code" onclick="runCode(); return false;" id="btnRunCode" /><br />
                    (NOTE: Uncomment the code that you want to run, and comment what you don't want to run. DO NOT run multiple popup code at the same time; for example do not uncomment radalert as well as radconfirm code before running the code, but only have either radalert or radconfirm uncommented.)
        </div>
  </div>
</div>

解决方案2 ：使用JavaScript和/或jquery，需要解析contentDiv所有DOM级别的所有后代的宽度和高度，以便其后代中的最大宽度和最大高度可以确定。然后我们只需要将contentDiv的宽度和高度设置为这些最大值加上一些余量。这在下面的代码中显示。

function pageLoad() {
            var max_width = 0;
            var max_height = 0;
            var element_width = 0;
            var element_height = 0;
               $("#contentDiv").find("*").each(function () {
                    element_width = parseInt($(this).width());
                    if (element_width > max_width) {
                        max_width = element_width;
                    }
                    element_height = parseInt($(this).height());
                    if (element_height > max_height) {
                        max_height = element_height;
                    }
                });
               if ($("#contentDiv").width() < max_width) {
                   $("#contentDiv").width(max_width + 10);
               }
               if ($("#contentDiv").height() < max_height) {
                   $("#contentDiv").height(max_height + 10);
               }
}

Answer 1

可能有一些父元素具有设定宽度：

＆＃13;

<div style="width: 280px;">
  <div>
    This div has a width of only 280px, even without having any style vinculated.
    <textarea style="width: 550px"></textarea>
  </div>
</div>

＆＃13;

为什么外部div不会扩展到其内容的宽度？

1 个答案: