Question

我正在显示客户端详细信息，当我在mulitlines中显示地址时，其他信息不会从开头显示。这是我的代码。

 <div class="contactsheader">
     <div class="contactheaderrow"> Address</div>
     <div class="contactheaderrow"> Phone</div>
     <div class="contactheaderrow"> Email</div>             
 </div>
 <div class="contactsdata">
     <div class="contactdatarowwrap"> {{names.address}}</div>
     <div class="contactdatarow"> {{names.phone}}</div>
     <div class="contactdatarow"> {{names.email}}</div>             
 </div>

我的css是：

.contactsheader{
    width: 80%;
    height: 30px;
    display: inline-block;
    background-color: rgb(62,95,135);
    font-family: 'Segoe UI';
    padding-left: 1%;
}

.contactheaderrow{
   width: 30%;
    display: inline-block;
    text-align:left;
    font-family: 'Segoe UI'; 
}

.contactsdata{
    width: 80%;
    height: 30px;
    display: inline-block;
    font-family: 'Segoe UI';
    padding-bottom: 2%;
    padding-left: 1%;

}
.contactdatarow{
    width: 30%;
    display: inline-block;
    text-align:justify;
    font-family: 'Segoe UI';    
}
.contactdatarowwrap{
    width: 30%;
    display: inline-block;
    text-align:left;
    font-family: 'Segoe UI'; 
    word-wrap: break-word;
}

此处地址显示为2行，然后电话和电子邮件也显示在第二行。如何在开始时显示它们。

Answer 1

我无法理解你的问题，但我想你问的是一行数据的垂直对齐属性，一旦单元格换行并强制行高于一行？如果是这样，解决方案是vertical-align: top;

将此添加到您的CSS：

.contactdatarowwrap, .contactdatarow {
    vertical-align:top;
}

此外，由于您实际上是在创建一个表格，因此查看display: table*;可能值得花时间。

如何使用css对齐多行文本？

1 个答案: