Question

结果显示在图像中。我想垂直显示它。我该怎么做？我希望结果是这样的：

我使用bootstrap模式垂直显示。请帮帮我。

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h6 class="modal-title">Please Select Your Destination</h6>
</div>
<div class="modal-body">
  <?php
    $data="select * from destination";
    $res=mysql_query($data);                            
    while($recor=mysql_fetch_assoc($res))
    {
      $id=$recor['id'];
  ?>
  <h4><font color="red"><?php echo $recor['destination']; ?> </font> </h4>
  <div class="clearfix"></div>  
  <ul>
    <?php           
      $data1="select * from sub_destination where destination_id='$id'";
      $res1=mysql_query($data1);
      while($recor1=mysql_fetch_assoc($res1))
      {
        $subid_count=$recor1["id"];
        $counts=mysql_query("select * from hotels where sub_destination_id='$subid_count'");
        $counts_res=mysql_num_rows($counts);
    ?>

    <li class="col-md-2 col-sm-1"><a href="search-result.php?sub_id=<?php echo $recor1['id']; ?>&main_id=<?php echo $recor['id']; ?>" style="color: inherit;"><div class="dest-list"  ><?php echo $recor1['sub_destination']; echo "&nbsp; (".$counts_res.")";?></div></a> </li>

    <?php 
      }
    ?>
  </ul>
  <div class='clearfix'></div>
  <?php     
    }
  ?>

Answer 1

list标签的class属性中的类“col-md-2”和“col-sm-1”都包含样式属性“float：left”，它将列表标签值显示为水平线。

Answer 2

你可以像这样使用flex-box：

.modal-body{ //your wrapper
  width: 100%;
  height: 400px; //specify height for the wrapper

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  align-items: stretch; 
}

但问题是ul中的回车，我认为你应该拆分ul：逐行增加一个变量，当列具有所需的行数时，你创建一个新的ul。如果有人有替代解决方案......

Answer 3

我前段时间遇到过类似问题。

有汽车列表，必须有多列菜单。我通过使用CSS提供的多列布局解决了这个问题。

此解决方案不适用于所有浏览器，但支持非常好（caniuse）并且IE已停止支持除边缘（read all about it）之外的所有其他IE版本，这可能会成为跨浏览器解决方案有一天。

这是我的解决方案： JS Fiddle

主要位是持有ul标签的div：

div {
    column-count: 4;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-rule: 0.1rem outset #aaaaaa;
    -moz-column-rule: 0.1rem outset #aaaaaa;
    -webkit-column-rule: 0.1rem outset #aaaaaa;
    width: 800px;
}

如何在弹出窗口中垂直显示结果

3 个答案: