html – CSS(位置：绝对左：50％=最大宽度：50％)？

概述我正在一个我遇到临时问题的网站上工作,我有一个像这样的CSS的div： .box{ position: absolute; width: auto; max-width: 75%; left: 50%; transform: translate(-50%,0); -ms-transform: translate(-50%,0); -webki @H_502_1@ 我正在一个我遇到临时问题的网站上工作,我有一个像这样的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工作正常,它有短文本和宽度：auto;工作得很完美……

但是第二个方框Box2有长文本和最大宽度：75％;但是它没有正常工作,你可以注意到它的宽度看起来像50％

我的问题是Box2从哪里获得50％的宽度？我该如何解决这个问题？

提前致谢

解决方法 您可以使用额外标签(例如跨度)实现所需的布局

DEMO

HTML：

<div ><span>Box1 Lara had been back and</span></div><div >    <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;}

总结

以上是内存溢出为你收集整理的html – CSS(位置：绝对左：50％=最大宽度：50％)？全部内容，希望文章能够帮你解决html – CSS(位置：绝对左：50％=最大宽度：50％)？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。