CSS(位置:绝对+左侧:50％=最大宽度:50％)? [英] CSS (position:absolute + left:50% = max-width:50%)?

问题描述

我正在一个临时性问题的网站上工作，我有一个 div 和 CSS ，如下所示:

I'm working on a website where I'm having a temporary problem, I've a div with CSS like this:

.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 > box1 正常工作，它的文本短且 width:auto; 正常工作...

You can see a simple JSFiddle here, where the box1 is working correctly, it has short text and the width: auto; is working perfectly ...

但是第二个框 box2 具有较长的文本，并且 max-width:75％; ，但是它无法正常工作，您会注意到它的宽度看起来像 50％

But the second box box2 has long text and max-width: 75%;, but it's not working correctly, you can notice that its width looks like 50%

我的问题是 box2 从哪里获得 50％宽度的?我该如何解决该问题?

My question is from where did the box2 get 50% width ?? And how can I fix that issue ?

预先感谢

推荐答案

您可以使用一个额外的标签(例如，一个 span )来实现所需的布局

You may achieve the desired layout using an extra tag (a span for example)

演示

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

这篇关于CSS(位置:绝对+左侧:50％=最大宽度:50％)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！