如何使嵌套的扩展到其内容?[英]How do I make a nested expand to its contents? 本文翻译自  chustar  查看原文  2011-12-14  5085    css/

I am using this system to try to implement a sliding window selector.
I have a <div> that is contained in another <div>. The outer <div> has a fixed size and the inner one should expand to contain its contents.

我正在使用这个系统来实现一个滑动窗口选择器。我有一个

，它包含在另一个

中。外部的

有一个固定的大小，内部的应该展开以包含它的内容。

<div style="width: 25px; overflow: hidden">
    <div id="middle">
        <div style="width: 50px"></div>
    </div>
</div>

The outer <div> has a fixed size.
The middle <div> should expand to match the size of the inner <div> (the one that has width 50px)
How, using CSS or JavaScript can I ensure that the middle <div> is as wide as the inner <div>, but still gets cut off by the outer <div>?

外部

具有固定的大小。中间的

应该扩展以匹配内部的

(宽度为50px)的大小，如何使用CSS或JavaScript确保中间的

与内部的

一样宽，但仍然被外部的

切断?

I have tried to use JQuery to get the length of the inner <div> and then dynamically set the width of the middle <div>, but this does not consistently get the right length.

我尝试使用JQuery获取内部的

的长度，然后动态设置中间的

的宽度，但这并不总是得到正确的长度。

6 个解决方案

#1

Div elements, by default, try to fit their container. so the middle one will try to fit its container which is the outer div.. it is not affected by content.

Div元素在默认情况下，尝试将其装入容器。所以中间的那个会尝试去适应它的容器外部的div。它不受内容的影响。

If you set the middle one to be display:inline-block you make it fit the contents instead of the container it that fixes the issue..

如果您设置中间的一个显示:inline-block，您使它适合于内容而不是容器来修复问题。

#2

Can you make inner div float? That way it should display full width of the span but without editing outer div width to expand the content longer than outer div width will be invisible.

你能让内部div浮动吗?这样，它应该显示跨度的全宽，但是如果不编辑外部div宽度来扩展内容的时间超过外部div宽度，则不可见。

#3

divs are block elements, so your inner div will naturally expand to the width of the containing div. You can ensure this by setting the style attribute of the inner div to 100%. You should also set its overflow CSS property to "hidden."

div是块元素，所以您的内部div会自然地扩展到包含div的宽度。您可以通过将内部div的样式属性设置为100%来确保这一点。您还应该将它的溢出CSS属性设置为“hidden”。

#4

You can get the width of the content of any HTML object like this:

您可以获得任何HTML对象的内容宽度:

document.getElementById("myDIV").clientWidth

#5

Use display: inline-block and max-width: ?px on middle. You'll want to put overflow-x: hidden on middle (not outer like in your code), but I left it off in the demo so you could see the width working.

使用显示:inline-block和max-width: ?px在中间。你会想把overflow-x:隐藏在中间(不像你的代码中那样是外部的)，但是我在演示中把它保留了下来，这样你就可以看到宽度在工作。

Demo: http://jsfiddle.net/ThinkingStiff/hHDQS/

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

HTML:

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:

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;
}

Output:

输出:

#6

If the inner div can be absolutely positioned the following will stretch it to fill up the parent completely (width and height):

如果内部div可以完全定位，下面将会拉伸它来完全填充父div(宽度和高度):

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