如何使嵌套的<div>扩展为其内容？</div>

Question

我正在使用这个系统来尝试实现一个滑动窗口选择器 我有一个<div>，其中包含另一个<div>。外部<div>具有固定大小，内部<div style="width: 25px; overflow: hidden"> <div id="middle"> <div style="width: 50px"></div> </div> </div> 应扩展以包含其内容。

<div>

外部middle的大小固定 <div> <div>应展开以匹配内部<div>（宽度为50px的那个）的大小 如何使用CSS或JavaScript，我可以确保中间<div>与内部<div>一样宽，但仍然会被外部<div>切断？

我尝试使用JQuery来获取内部<div>的长度，然后动态设置中间{{1}}的宽度，但这并不总是得到正确的长度。

Answer 1

默认情况下，Div元素会尝试适合其容器。所以中间人将尝试适合其外部div的容器..它不受内容的影响。

如果您将中间的一个设置为display:inline-block，则使其适合内容而不是容器来解决问题。

Answer 2

你能让内部div浮动吗？这样它应该显示跨度的全宽，但不编辑外部div宽度以扩展内容长于外部div宽度将是不可见的。

Answer 3

div是块元素，因此你的内部div自然会扩展到包含div的宽度。您可以通过将内部div的style属性设置为100％来确保这一点。您还应将其溢出CSS属性设置为“hidden。”

Answer 4

您可以获取任何HTML对象的内容宽度，如下所示：

document.getElementById("myDIV").clientWidth

Answer 5

在display: inline-block上使用max-width: ?px和middle。您需要将overflow-x: hidden放在middle上（而不是代码中的outer），但我在演示中将其保留下来，以便您可以看到宽度正常工作。

演示：http://jsfiddle.net/ThinkingStiff/hHDQS/

HTML：

<div class="outer">
    <div class="middle">
        <div id="inner1"></div>
    </div>
</div>

<div class="outer">
    <div class="middle">
        <div id="inner2"></div>
    </div>
</div>

CSS：

.outer {    
    border: 1px solid green;
    height: 100px;
    width: 300px;
}

.middle {
    border: 1px solid red;
    display: inline-block;
    height: 75px;
    max-width: 300px;
}

#inner1 {
    border: 1px solid blue;
    height: 50px;
    width: 50px;
}

#inner2 {
    border: 1px solid blue;
    height: 50px;
    width: 350px;
}

输出：

Answer 6

如果内部div可以绝对定位，则以下将拉伸它以完全填充父级（宽度和高度）：

#myInner{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:auto;
  height:auto;
}