Div缩小以包装绝对定位div的宽度问题

时间:2011-10-22 21:14:31

标签: html css

我遇到问题,#div_b的内容可以扩展到300px的宽度。无论我如何修改CSS,它仍然会被破坏。 (请不要问我为什么我在外部和内部div中使用绝对值,因为我有这样做的原因我不想扩展,因为这个问题不是关于那个问题)

CSS

#div_a{
  position: absolute;
  top:0;
  max-width:300px
}

#div_b{
  position: absolute;
  background-color:gray;
}

HTML

<div id="div_a">
  <div id="div_b">
    Lorem ipsum dolor sit amet, est tristique ligula odio semper inceptos ut
  </div>
</div>

JSFiddle

谢谢!

4 个答案:

答案 0 :(得分:1)

#div_b{
  position: absolute;
  width: 100%;
  background-color:gray;
}

删除位置:绝对;

#div_b{
  width: 100%;
  background-color:gray;
}

答案 1 :(得分:0)

几种不同的解决方案。

删除最大值: http://jsfiddle.net/BRkCU/12/

删除职位: http://jsfiddle.net/BRkCU/15/

答案 2 :(得分:0)

这应该这样做

#div_a{
  position: absolute;
  top:0;
  max-width:300px;
  width:100%;
}

#div_b{
   position: absolute;
   background-color:gray;
}

div_b没有扩展的原因是因为div_a没有扩展。通过将其设置为100%,您现在占用内容所需的空间,并保持最大宽度:300px,内容不会超出该区域。

答案 3 :(得分:0)

我认为您正在寻找的是:

#div_b{
  position: absolute;
  background-color:gray;
  white-space:nowrap;
}