嘿所有我试图找到正确的代码,以便DIV TABLE中的输入转到下一行,如果它太长而无法在一行显示:
JSFIDDLE是here
HTML代码:
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-2 text-right" style="width: 100%;">
<div class="panel panel-default">
<div class="panel-heading" align="left">
<h4>Accident Information:</h4>
</div>
<div class="panel-body">
<div class="Table">
<div class="Row">
<div class="Cell" align="right">
Date of Accident:
</div>
<div class="Cell" align="left">
{AI_DATEOF}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Type of Accident:
</div>
<div class="Cell" align="left">
{AI_ACCIDENT}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Accident Location:
</div>
<div class="Cell" align="left">
{AI_LOCATION}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Accident Details:
</div>
<div class="Cell" align="left">
{AI_DETAILS}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
List Of Other Family Members
<br/> That Were Involved:
</div>
<div class="Row" style="width:100%;display:table;">
<!--Details 1 -->
<div class="Cell" align="left" style="width:50%; display: table-cell;">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
如果您使用Bootstrap,而不是制作自己的CSS,为什么不将cell
的班级更改为col-sm-2
左右?