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％的填充。多数民众赞成。

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

2 div水平对齐 - 文本在右div中的新行上

1 个答案: