Fatal编程技术网
  • css/
  • Css 无内容包装的绝对定位

Css 无内容包装的绝对定位

css

Css 无内容包装的绝对定位,css,position,word-wrap,Css,Position,Word Wrap,我遇到了一个棘手的css问题，似乎无法解决。 我想将一个包装器放置在一个容器中，该容器具有left属性（正方向；负方向似乎因某些原因而起作用），而不包含要开始包装的内容。 下面是一个用于以下HTML和CSS的 #容器{ 宽度：200px； 高度：200px； 位置：相对位置； 边框：1px实心#000； /*空白：nowrap；*//*适用于chrome，但不适用于firefox*/ } #包装纸{ 位置：绝对位置； /*左：100px*/ } #一，二{ 宽度：80px； 高度：80px；

我遇到了一个棘手的css问题，似乎无法解决。 我想将一个包装器放置在一个容器中，该容器具有
left
属性（正方向；负方向似乎因某些原因而起作用），而不包含要开始包装的内容。 下面是一个用于以下HTML和CSS的



#容器{
宽度：200px；
高度：200px；
位置：相对位置；
边框：1px实心#000；
/*空白：nowrap；*//*适用于chrome，但不适用于firefox*/
}
#包装纸{
位置：绝对位置；
/*左：100px*/
}
#一，二{
宽度：80px；
高度：80px；
背景色：#000；
利润率：10px；
浮动：左；
}
如果取消注释
左：100px，您会注意到这两个框被移动了，但也被包装了。在chrome中，可以使用
空白：nowrap。不过，它不适用于Firefox，也会影响文本内容。我尝试删除
位置：relative并使用Javascript计算正确的偏移量，但这有点不方便


Edit:它确实适用于CSS3的
transform:translateX（100px）
，但我还是更喜欢
左侧的
变体。
为包装指定宽度似乎在Firefox和Chrome中都适用（而且根本不需要
空白
属性）。
包装器的CSS变成：


#包装器{
位置：绝对位置；
左：100px；
宽度：200px；
}

太棒了，非常感谢！总是看起来很小的事情。