Question

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

.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%宽度的位置？我该如何解决这个问题？

提前致谢

Answer 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;
}

Answer 2

如果元素具有'position：absolute'，则包含块为由最近的祖先建立，具有'绝对'的'位置'， '相对'或'固定'。 reference

如果html标记元素是您的案例中的包含块，则可能的解决方案是添加容器<div>并将其位置设置为relative，demo。

Answer 3

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

因此，我们可以得出结论width: auto;和left: 50%;是在transform: translate(-50%,0);之前计算出来的。可能按此顺序。

所以这就是你的答案，为什么div不会超过50％。

Answer 4

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

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

这个＆＃34;中心包装＆＃34; （你的＆＃34;框＆＃34;）现在随着孩子一起成长并且也是中心的。

Answer 5

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

如果div内的东西更大，那么75％div仍然会有75％但是如果div中的某些内容较低，则75％div将适合此元素的宽度。

尝试添加宽度：75％而不是

Answer 6

你只是试图集中你的div？您可以将水平边距设置为auto吗？

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

DEMO：http://jsbin.com/riqafo/2/edit

在原始代码中，div的宽度限制为窗口的50％，因为它们的绝对位置距窗口左侧50％。

然后，变换将div滑回到窗口宽度的50％左侧，但它们保持缩小的大小。

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

Answer 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;
}

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

7 个答案: