CSS（位置：绝对 + 左：50% = 最大宽度：50%）？答案

【问题标题】：CSS (position:absolute + left:50% = max-width:50%)?CSS（位置：绝对 + 左：50% = 最大宽度：50%）？
【发布时间】：2018-02-22 21:38:59
【问题描述】：

我正在一个网站上工作，我遇到了一个临时问题，我有一个带有 CSS 的 div，如下所示：

.box{
    position: absolute;
    width: auto;
    max-width: 75%;
    left: 50%;
    transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    background: #000;
    color: #fff;
}

您可以看到一个简单的JSFiddle here，其中box1 工作正常，文本很短，width: auto; 工作正常...

但是第二个框box2有长文本和max-width: 75%;，但是它不能正常工作，你可以注意到它的宽度看起来像50%

我的问题是box2 是从哪里得到50% 宽度的？我该如何解决这个问题？

提前致谢

【问题讨论】：

为什么要它们在同一类型的选择器box中？
这只是一个关于我真正问题的例子，divs 在我的网站中都是li，它们用于具有不透明效果的股票代码......所以我需要它们同班
你希望每个 div 的宽度是多少？
我添加了box1box2类只是为了修复示例中的垂直位置，它与问题无关
这就是为什么你应该制作一个 JSfiddle。坦率地说，我认为您在这里可能采取了不同的方式。

标签： html css

【解决方案1】：

您可以使用额外的标签（例如span）实现所需的布局

DEMO

HTML：

<div class="box box1"><span>box1 Lara had been back and</span></div>
<div class="box box2">
    <span>box2 Lara had been back and forth along the river path many times in her short life. Her people had not created the path, it had always been there, like the river, but their deerskin-shod feet and the wooden wheels of their handcarts kept the path well worn. Lara’s people were salt traders, and their livelihood took them on a continual journey</span>
</div>

CSS：

.box{
    position: absolute;
    width: 100%;
    text-align:center;
}

.box1{
    top: 20px;
}

.box2{
    top: 100px;
}
.box span{
    display:inline-block;
    max-width:75%;
    background: #000;
    color: #fff;
    text-align:left;
}

【讨论】：

+1 同意..我不想在没有看到完整 HTML 的情况下提出这个建议，但如果代码是可编辑的，这是最好的选择。

【解决方案2】：

使用样式width: fit-content;。示例：

.center-wrapper {
  position: absolute;
  left: 50%;
  top: 0;
  width: fit-content;
  transform: translate(-50%);
  background-color: yellow;
}

这个“center-wrapper”（你的“盒子”）现在随着孩子一起成长并且居中。

【讨论】：

【解决方案3】：

如果元素有'position: absolute'，则包含块是由最近的祖先以“绝对”的“位置”建立， “相对”或“固定”。 reference

在您的情况下，html 标记元素是包含块，一个可能的解决方案是添加一个容器 <div> 并将其位置设置为 relative 、 demo。

【讨论】：

如果我需要container的宽度适合屏幕的宽度，这意味着100%..
将容器的宽度设置为 100% o.o
我们回到了同样的问题，box2 的宽度看起来是 50% 而不是 75%
你的 div 的宽度被限制为容器的 50%，因为它们的绝对位置距离窗口左侧 50%。

【解决方案4】：

首先你有left: 50%;。这使得 div 有 50% 的宽度，因为它有 width: auto; 并且只剩下 50% 的页面可以填充。之后，将 div 向左移动其自身宽度的 50%，使其居中。

因此我们可以得出结论，width: auto; 和 left: 50%; 在 transform: translate(-50%,0); 之前计算。大概就是这个顺序。

这就是为什么 div 不会增长超过 50% 的问题的答案。

【讨论】：

我注意到在工作时，但我想知道我是否可以让 transform: translate(-50%,0); 在 width: auto; 和 left: 50%; 之前工作，我猜不，没有 JS .. 你有什么想法吗？这种事？？
我用margin: 0 auto; 代替left: 50%; 和transform: translate(-50%,0); 进行了一些实验以进行居中。然而，这使得 div 总是使用max-width: 75%;。如您所愿，如果文本很短，则不要换行。而且由于您已经获得了完成预期结果的公认答案，因此我没有花更多时间在上面。
我看到职位相关没有这样的问题。如果它的块元素，宽度保持与父级相同。如果它的 inline-block 那么它将使用自己的宽度，最大宽度将自动是父级的。

【解决方案5】：

你输入 max-width: 75% 这意味着你的 div 的宽度可能小于 75% 所以

如果 div 里面的东西更大，那么 75% div 仍然有 75% 但是如果 div 里面的东西低于 75% 的 div 将适合这个元素的宽度。

尝试添加 width:75%

【讨论】：

如果我添加 width:75% 第一个框不适合它的内容！！
我的问题是box2从哪里得到50%宽度？？
@MujtabaFathel 你告诉浏览器max-width 是75%，但width 是auto。所以浏览器会尽量使div 尽可能小。我认为你不能通过将它们放在同一个选择器中来实现你想要的。
这不是 50% div 适合里面的文本。所以尝试使用 min-width:75%

【解决方案6】：

您只是想使您的 div 居中吗？您可以将水平边距设置为auto 吗？

.box {
  background: #000;
  color: #fff;
  margin: 10px auto;
  max-width: 75%;
}

演示：http://jsbin.com/riqafo/2/edit

在您的原始代码中，由于 div 的绝对位置距离窗口左侧 50%，因此您的 div 的宽度被限制为窗口的 50%。

然后，转换将 div 向左滑动窗口宽度的 50%，但它们保持缩小后的大小。

自动宽度允许上部 div 的宽度向下折叠到其包含的文本。这与较低的 div 无关，因为如果允许，其文本的长度将超过窗口的宽度。

【讨论】：

【解决方案7】：

我想这可以在不改变你的结构的情况下解决你的问题。

jsfiddle

.box{
    position: absolute;
    width: auto;
    display: table;
    max-width: 75%;
    left: 0;
    right: 0;
    background: #000;
    color: #fff;
    margin: auto;
}

.box1{
    top: 20px;
}

.box2{
    top: 100px;
}

【讨论】：