html - CSS(位置 :absolute + left:50% = max-width:50%)?

Question

我在一个暂时遇到问题的网站上工作，我有一个带有 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% 宽度？我该如何解决这个问题？

提前致谢

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