使用绝对定位时无法使最大宽度工作

Question

使用绝对定位时，我无法使max-width工作。 在https://jsfiddle.net/jn2bs6ax/中 ，项目应采用尽可能小的宽度，最大宽度为1000px。 但它占据了大约50％的宽度并包装文本。 如何使它工作？ 如果我将max-width设置为300px之类的小尺寸，它可以工作，但是任何大于当前宽度的东西都不会导致它扩展。

此示例仅显示一个项目已绝对定位到项目下方的中心，但我使用transform ， top ， bottom ， left和right来定位相对于项目的所有4个方向的内容。 该解决方案应适用于所有4个案例。

有一个类似的问题CSS（位置：绝对+左：50％=最大宽度：50％）？ 但答案仅适用于下方居中但不适用于所有情况，例如定位到垂直居中的项目的右侧。

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

CSS

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 100%;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

Answer 1

尝试设置display: inline-table; 或display: table;

 .relative { position: relative; } .absolute { position: absolute; background-color: grey; max-width: 1000px; top: 100%; left: 50%; transform: translateX(-50%); display: inline-table; } 

 <div class="relative"> text <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div> text </div> 

Answer 2

尝试添加width: 100%; 为你的班级在任何地方的最大宽度。

 .relative { position: relative; } .absolute { position: absolute; background-color: grey; max-width: 1000px; top: 100%; left: 50%; transform: translateX(-50%); width: 100%; } 

 <div class="relative"> text <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div> text </div> 

Answer 3

正如您已经注意到的那样，问题与left:50%有关left:50%会将元素的宽度限制为父元素的50% 。

要克服这一点的一种哈克的方式是通过添加因为绝对的元素更多的填充会考虑填充盒增加父元素的宽度。 然后添加负边距以纠正添加的填充。 你应该只注意溢出：

 .relative { position: relative; padding:0 50%; margin:0 -50%; } .absolute { position: absolute; background-color: grey; max-width: 800px; top: 100%; left: 50%; transform: translateX(-50%); } .hide { overflow:hidden; height:500px; } 

 <div class="hide"> <div class="relative"> text <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div> text <div class="absolute" style="top:200px;">Lorem ipsum dolor sit amet</div> </div> </div>