Css 阻止列调整内容大小_Css

Css 阻止列调整内容大小

css

Css 阻止列调整内容大小,css,Css,我正在尝试为网站创建metro UI样式的平铺网格，但在保持大小不变方面遇到了一些困难。我目前正在使用CSS3列从上到下然后从左到右对div进行排序。我现在遇到的唯一问题是，我可以使列间距保持静态，但大多数浏览器仍然尝试调整列内div的大小 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery.min.js"></script>

我正在尝试为网站创建metro UI样式的平铺网格，但在保持大小不变方面遇到了一些困难。我目前正在使用CSS3列从上到下然后从左到右对div进行排序。我现在遇到的唯一问题是，我可以使列间距保持静态，但大多数浏览器仍然尝试调整列内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>

例如：

基本上，我只想在用户调整web浏览器的大小时阻止内部div的大小调整

在css中，为平铺设置了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；这就是产生调整大小问题的原因

两者的值相同

.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;
        }