div与绝对位置的宽度取决于其父宽度？ [英] The width of div with absolute position depends on its parent's width?

问题描述

我希望div的宽度取决于其内容，而不是其父级。例如，

 < div style =position：absolute> 
< div style =position：absolute> 
< div> Div< div style =position：absolute> Div in Div< / div> 
< / div> 
< / div> 
  

会导致文字换行，如 http://jsfiddle.net/ymgfN/2/

看起来内部div的宽度取决于在其父母的宽度上，尽管其立场是绝对的。例如，如果我们为其父项指定宽度，它将按预期工作（不包含自动换行）： http：// jsfiddle.net/ymgfN/3/

不幸的是，我无法提前指定父级的宽度 - 最终我的宽度取决于它的孩子。而且，我必须使用绝对位置。是否有可能在纯粹的CSS？

---

一些背景：我没有试图做一个页面来完成一些设计 - 我知道，对于任何合理的需求，有三个绝对位置是疯狂的。相反，我正在做一些实验，看看绝对定位是否可以成为解决一系列布局问题的通用方法（通常需要灵活使用静态/绝对/浮点的多功能复杂布局）。不幸的是，我遇到了这个问题，这将使得使用绝对位置的想法变得无处不在。

解决方案

和之前的高度将从文档流中移除。当您完全放置外部元素时，它会从流中移除，并且由于它没有直接内容，所以它的宽度为0，高度为0.因此，它内部的另一个试图添加文本的除法元素会继承父元素的宽度0所以它只会扩展到最长的单词的宽度以允许内容，然后将其他所有内容打破为新的行。 完成之后，它将文档流中的元素从其自身中移除。

因此，要回答您的第一个问题问题，是，如果您未指定元素本身的宽度和/或高度，则绝对定位的元素会注意其父元素的尺寸。你知道你孩子的宽度应该是多少？

至于你的第二个问题......你可以使用 white-space： NOWRAP 。不是一个很好的解决方案。更优选地，找到一种更好的方式来组织你的内容，所以你不需要三个绝对定位的元素嵌套在对方内。你说你有使用它们......真的吗？更可能的是，你还没有找到更好的方法去做，但如果你选择走这条路，那还有另一个问题。

I'd like to have the width of a div with absolute position depending on its content rather than its parent. For example,

<div style="position:absolute">
 <div style="position:absolute">
  <div style="position:absolute">Div in Div</div>
 </div>
</div>

will cause word wrap as shown in http://jsfiddle.net/ymgfN/2/

It looks like the inner div's width will depend on its parent's width, even though its position is absolute. For example, if we specify width to its parent, it will work as expected (no word wrap): http://jsfiddle.net/ymgfN/3/

Unfortunately, I can't specify the parent's width in advance -- eventually i will have its width to depend on its children. And, I have to use absolute position. Is it possible in pure CSS?

---

Some background: I am not trying to make a page to fulfill some design -- I know it is crazy to have three stacked absolute position for any reasonable demand. Rather, I am doing some experiment to see if the absolute positioning can be a general approach to solve a range of layout problems (versatile complicated layout that usually requires the clever use of static/absolute/float). Unfortunately, I ran into this issue which will make the idea of using the absolute position everywhere stupid.

解决方案

The element gets its width and height before it gets removed from the flow of the document. When you position the outside element absolutely, it gets removed from the flow and since it has no immediate content, it has a width of 0 and height of 0. Therefore, another division element inside it attempting to add text inherits the parent's width of 0. So it's only going to expand to the width of the longest word to allow for content, and then break everything else to new lines. After it's done that, it removes the element from the flow of the document to be off on its own.

So, to answer your first question, yes, an absolutely positioned element does pay attention to its parent element's dimensions if you don't specify a width and/or height on the element itself. Do you know what the width of your children is supposed to be?

As for your second question... you can use white-space: nowrap. Not really a great solution. More preferably, find a better way to organize your content so you don't need three absolutely positioned elements nested inside each other. You say you have to use them... Really? It's more likely that you just haven't found a better way to do it, but that's for another question if you so choose to go down that road.

这篇关于div与绝对位置的宽度取决于其父宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！