Question

为什么在left和right设置值为absolute的div之间存在差异。
当我为right设置值时，文本填充在伪类FIDDLE1中。但不是left FIDDLE2。我必须设置width FIDDLE3。

那么如何在不设置宽度的情况下使用left并将结果设为FIDDLE1？

CSS ：

div {
    width: 100px;
    height: 100px;
    position: relative;
}
div:after {
    content: 'ce champs est obligatoire';
    position: absolute;
    left: 100px;
}

Answer 1

问题是设置为relative的div具有100px的固定宽度，如果你要使该div的宽度更宽，例如300px，那么之后的内容是合适的，它将不会换行文本。

在white-space:nowrap;之后给出div：http://jsfiddle.net/jme11/6avYE/以避免问题。

OR，

另一种选择是将div包装在另一个div中，并将包装器div设置为具有位置：relative而不是内部div，如下所示：http://jsfiddle.net/jme11/PhVLj/

div:not(div>div) {
    width: 500px;
    height: 100px;
    position: relative;    
}
div>div {   
    width: 100px;
    height: 100px;    
    background-color: aliceblue;
    border: 1px gray solid;
}
div>div:after {
    content: 'ce champs est obligatoire';
    position: absolute;
    left: 100px;
    /* right: -167px; 
    width: 157px;*/

    background-color: rgb(230, 122, 38);
    color: white;
    padding: 8px 10px;
    border-radius: 5px;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size: 13px;
}

左右值对宽度的影响

1 个答案: