Question

我想要两个固定宽度的句子：30％但我的第一个div“单词”转到下一行。 class =“left”字显示不正确，另一个我的第二个下一个div“字”混合与此第一个div

HTML

<div class="bg">
    <span class="left">Hello Hello Hello Hello my text is missing plz show</span>
    <span class="right">My friend.</span>
</div>
  <div class="clear"></div>
<div class="bg">
    <span class="left">sohan sohan sohan sohan sohan sohan sohan</span>
    <span class="right">My friend.</span>
</div>

CSS

.bg{width:90%; margin:0 auto; position:relative;}
.bg .left{width:auto; max-width:30%; min-width:10%; position:absolute; text-align:justify; background-color:white;}
.bg .right{width:auto; max-width:30%; min-width:10%; float:right; overflow-x:hidden; overflow-y:hidden; text-align:justify; background-color:white;}
.bg .left:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . ."}
.clear{clear:both;}

RESULT

Hello Hello Hello Hello.................................... My friend.
sohan sohan sohan ......................................... My Friend.
sohan sohan sohan sohan

Answer 1

从position:absolute移除.bg .left，然后添加display:inline-block以重新建立阻止上下文，允许在span上设置宽度（默认情况下为内联元素和因此不尊重宽度声明）。另外，您应该更改为float:right上的.bg .left:before。

Your fixed Example

两句话之间的虚线但句子是固定宽度

1 个答案: