Question

我正在尝试为网站创建一个地铁用户界面风格的磁贴网格，而且我在保持尺寸和静态等方面遇到了一些困难。我目前正在使用CSS3列从上到下从左到右排序div。我现在唯一的问题是我可以将列GAP设为静态，但大多数浏览器仍会尝试调整列内的div的大小

<!DOCTYPE html>

<html>
<head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $("div.dashboard").mousewheel(function(event, delta){
                this.scrollLeft -= (delta * 50);

                event.preventDefault();
            });


        });

    </script>
    <style>
        .tile
        {
            margin: 2px;
            display: inline-block;
            column-break-inside: avoid;
            -ie-column-break-inside: avoid;
            -moz-column-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            float: none;
            color: #CDCDCD;
            padding-left: 3px;
            cursor: pointer;
            border: 2px solid white;
            width: 180px;
        }
        .tile:hover
        {
            border:2px solid gray;
        }
        .tile span{
            font-weight: bolder;
            padding: 3px;
            font-family:"Times New Roman", Times, serif;
        }
        .ONE
        {
            background-color: #894848;
        }
        .TWO
        {
            background-color: #596996;
        }
        .THREE
        {
            background-color: #3f5f3e;
        }
        .dHeight
        {
            height: 355px;
        }
        .sHeight
        {
            height: 175px;
        }
        .dashboardContainer
        {
            columns: 150px auto;
            -moz-columns: 175px auto;
            -webkit-columns: 150px auto;
            column-gap: 4px;
            -moz-column-gap: 4px;
            -webkit-column-gap: 4px;
            height: 600px;
            //width: 3600px;
        }
        .dashboard
        {
            overflow-x: scroll;
        }
    </style>
</head>
<body >
    <div class="dashboard">
        <div class="dashboardContainer">
           <div class="tile THREE sHeight"> 
                1
           </div>
           <div class="tile TWO sHeight"> 
                2
           </div>
           <div class="tile ONE dHeight">
            3
           </div>
           <div class="tile TWO dHeight">
            4
           </div>
           <div class="tile THREE sHeight"> 
            5
           </div>
           <div class="tile TWO sHeight">
            6
           </div>
           <div class="tile THREE dHeight">
            7
           </div>
           <div class="tile ONE sHeight">
            8
           </div>
           <div class="tile ONE sHeight"> 
            9
           </div>
           <div class="tile THREE sHeight"> 
            10
           </div>
           <div class="tile TWO sHeight"> 
            11
           </div>
           <div class="tile THREE sHeight"> 
            12
           </div>

       </div>
   </div>
</body>

</html>

示例：JSFiddle

基本上，我只是想在用户调整网络浏览器的大小时停止调整内部的div。

Answer 1

Fiddle

.tile{  
    ......
     width: 180px;
 }

在你的css中你为tile设置了180px宽度，如

.dashboardContainer
        {
            columns: 150px auto;
            -moz-columns: 175px auto;
            -webkit-columns: 150px auto;
            column-gap: 4px;
            -moz-column-gap: 4px;
            -webkit-column-gap: 4px;
            height: 600px;
            //width: 3600px;
        }

您已将列设置为150px宽度;这是调整大小问题的原因

两者都有相同的值。

防止列调整内容大小

1 个答案:

Fiddle