Question

我在CSS中使用列时遇到了一些问题。我想设置<?php include_once('configuration/db.php'); ?> <div class="table-responsive"> <table class="table m-0"> <thead> <tr class="gradeA"> <th><input type="checkbox" id="selectall"/></th> <th style="text-align: center;">Username</th> <th style="text-align: center;">Email</th> <th style="text-align: center;">CPUKey</th> <th style="text-align: center;">IP</th> <th style="text-align: center;">Expirey</th> <th style="text-align: center;">Enabled?</th> <th style="text-align: center;">Profile Picture</th> <th style="text-align: center;">User Level</th> <th style="text-align: center;">Date/Time Registered</th> <th style="text-align: center;">Account Credits</th> <th style="text-align: center;">Free Gifted Credits</th> </tr> </thead> <tbody> <tr> <?php $username = $_SESSION['username']; $clients_result = mysqli_query($con, "SELECT id, username, email, cpukey, ip, time, enabled, profile_picture, userLevel, register_time, account_credits, free_gifted_credits FROM users WHERE username LIKE '%".$_POST["search"]."%'"); if(mysqli_num_rows($clients_result) > 0) { while($payment_row = mysqli_fetch_array($clients_result)) { echo ' <tr style="text-align: center; font-size: 12px;"> <td> <input type="checkbox" name="checked_id[]" class="checkbox" value='.($payment_row['id']).'> </td> <td> '.($payment_row['username']).' </td> <td> '.($payment_row['email']).' </td> <td> '.$payment_row['cpukey'].' </td> <td> '.($payment_row['ip']).' </td> <td> <b>'.$payment_row['time'].'</b> </td> <td> '.($payment_row['enabled'] == 1 ? '<span class="label label-success">Yes</span>' : '<span class="label label-danger">No</span>').' </td> <td> '.("<img src=".$payment_row['profile_picture']." alt='user-img' class='img-circle user-img' style='height: 20px; width: 20px;'>").' </td> <td> '.userLevelValidation().' </td> <td> '.$payment_row['register_time'].' </td> <td> '.number_format($payment_row['account_credits'], 2, '.', '').' </td> <td> '.number_format($payment_row['free_gifted_credits'], 2, '.', '').' </td> '; ; } }else{ ?> <tr><td colspan="12" style="text-align: center; padding: 30px; letter-spacing: 2px; color: red;"><i class="fa fa-spin fa-spinner"></i> <strong>Oh snap!</strong> No Purchase records found. <i class="fa fa-spin fa-spinner"></i></td></tr> <?php } ?> </tr> </tbody> </table> </div> <script type="text/javascript"> $('#selectall').click(function() { $(this.form.elements).filter(':checkbox').prop('checked', this.checked); }); </script>，但结果只有5列。它似乎适用于值<= 5但是当我尝试设置更高的值时会产生奇怪的结果。列数不匹配。

column-count: 6;

.columns {
  column-count: 6;
}
.columns__item {
  display: inline-block;
  background: #fff;
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

这是小提琴：https://jsfiddle.net/btqxd20r/1/。我正在Chrome中测试它。

Answer 1

可能是display: inline-block;问题，将您的商品增加到40或50，然后检查，它是否正常工作..这里是更新的小提琴https://jsfiddle.net/btqxd20r/2/

更新：

使用float: left设置的宽度（以像素为单位）显示行中的项目，以及是否要使其对设备做出响应。请记住，在结束浮动div之后应该使用clear:both css ...

无法使用CSS中的列计数设置X列

1 个答案: