[英]100% div inside absolute div with no width and fixed height
I need to have a div that's absolutely positioned and contains two child divs: one with text that goes on top, and one with a background-color that's on the bottom. 我需要一个绝对定位的div,它包含两个子div:一个文本位于顶部,另一个背景颜色位于底部。 Like so:
像这样:
<div class="test1">
<div class="caption">Text that determines width of parent.</div>
<div class="bg"></div>
</div>
I know I can just set a background color on .test1, but I need this background to be a separate div to give me backwards-compatible (IE 7+) control over the position, opacity, width, etc. using jQuery. 我知道我可以在.test1上设置背景颜色,但我需要这个背景是一个单独的div,以便使用jQuery对位置,不透明度,宽度等进行向后兼容(IE 7+)控制。
With the following CSS, I can get everything to work, except that the text is behind the .bg div. 使用以下CSS,除了文本在.bg div后面之外,我可以使一切工作正常。 I need the text on top.
我需要顶部的文字。
<style type="text/css">
.test1 {
position: absolute;
left: 100px;
top: 100px;
}
.test1 .caption {
float: left;
white-space: nowrap;
}
.test1 .bg {
height: 50px;
background-color: #222;
}
</style>
How can I have the width of .test1 be based on the width of the text and have the .bg div be 100% width and underneath .caption? 如何使.test1的宽度基于文本的宽度并使.bg div为100%宽度并位于.caption下面? I should repeat that this needs to work in IE 7 and above.
我应该重申,这需要在IE 7及更高版本中运行。
Here's a fiddle: http://jsfiddle.net/kbp6r/ 这是一个小提琴: http : //jsfiddle.net/kbp6r/
For the positioning problem, you'll have to rely on the magic of z-index
;) it is applicable to elements that have a non-static position (default is position: static
). 对于定位问题,您将不得不依赖于
z-index
的魔力;)它适用于具有非静态位置的元素(默认为position: static
)。 Therefore, have you considered absolutely positioning the .bg
element, and relatively positioning the .caption
element? 因此,您是否考虑过绝对定位
.bg
元素,并相对定位.caption
元素?
.test1 .caption {
position: relative;
white-space: nowrap;
z-index: 2; /* More than .bg so it will be above */
}
.test1 .bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1; /* Less than .caption so it will be stacked underneath */
}
In order to force the .bg
element to be of the same dimension as .caption
, you can use the dirty positioning trick - when an absolutely positioned element has the following properties declared: 为了迫使
.bg
元素是相同尺寸的.caption
,您可以用肮脏的定位绝招-当一个绝对定位的元素具有以下属性声明:
top: 0;
left: 0;
bottom: 0;
right: 0;
It will fill to the size of the parent container - and in this case, the size of the parent container is determined by the content in .caption
, since you have used a relative position for it (per my recommendation). 它将填充父容器的大小 - 在这种情况下,父容器的大小由
.caption
的内容确定,因为您已经使用了它的相对位置(根据我的建议)。
Here is a fiddle that shows how it works: http://jsfiddle.net/teddyrised/kbp6r/2/ 这是一个小提琴,显示它是如何工作的: http : //jsfiddle.net/teddyrised/kbp6r/2/
Change your html as like below. 如下所示更改您的HTML。
<div class="test1">
<div class="bg">
<div class="caption">Text that determines width of parent.</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.