2 div 水平对齐 - 文本在右 div 中换行

Question

我有两个水平对齐的 div。我需要将它们用于列表，例如：

Surname: Mario
Name: Rossi

这两个 div 在一个 div 中，占我内容的 50%，所以我在右边还有其他内容。我用过“word-wrap:break-word;”将内容包装在我列表的右列中，但是当它换行时，它会产生如下内容：

Surname: Mar
Name: io
        Rossi

虽然我想要这个结果：

Surname: Mar
         io
Name: Rossi

我该如何解决这个问题？

我的代码：

css:

.left{
   width:50%;
   float:left;
   padding-right:10px;
   line-height:15px;
}
.right{
   width:50%;
   float:right;
   padding-left:10px;
   line-height:15px;
   word-wrap:break-word;
}

html:

<div>
    <div style="width:50%;float:left;">
        <div class="left">Surname</div><div class="right">Mario</div>
        <div class="left">Name</div><div class="right">Rossi</div>
    </div>
    <div style="width:50%;float:right;">
    </div>
</div>

Answer 1

.left{
   width:45%;
   text-align:right;
   float:left;
   line-height:15px;
}
.right{
   width: 45%;
   text-align:left;
   float:right;
   line-height:15px;
}

<div>
    <div style="width:50%;float:left;">
        <div class="left">Surname</div><div class="right">Mario</div>
        <div class="left">Name</div><div class="right">Rossi</div>
    </div>
</div>

这样你得到了 10% 的填充。就是这样。

或者您可以使用 calc width: calc(50% - 5px); 添加填充，它也可以工作。