CSS排队DIV TABLE在长于宽度时堆叠

时间:2015-12-07 19:05:10

标签: html css html5 twitter-bootstrap css3

嘿所有我试图找到正确的代码,以便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>

1 个答案:

答案 0 :(得分:0)

如果您使用Bootstrap,而不是制作自己的CSS,为什么不将cell的班级更改为col-sm-2左右?