Question

我正在创建我的第一个WordPress网站，我正在用我的主题面对这个问题。我正在使用我下载的自定义主题，在其CSS文件中我有这个代码块：

...
@media only screen and (min-width: 700px) {
  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media only screen and (min-width: 900px) {
  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media only screen and (min-width: 1100px) {
  .masonry {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
  .masonryinside {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }

@media only screen and (min-width: 1280px) {
  .wrapper {
    width: 1260px;
  }
}

问题是，即使我的屏幕宽度为＆gt;，列数也不会改变。 1100.当我检查元素时，这是img：

或者您可以在我的网站上自行查看：https://vietani.000webhostapp.com/

Answer 1

您缺少1100px媒体查询的结束花括号

Answer 2

您也可以使用Bootstrap卡。试试这个代码，它适用于不同大小的屏幕

 <html lang="en">

<head>
  <title>Contact Button</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- BOOTSTRAP CARDS-->       
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>

  <style>
    #width{
        width:300px;
        height:auto;
    }

    .card-img-top{
        width:300px;
    }

    #col{
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }

    @media screen and (max-width:768px) and (orientation:portrait){
        #col{
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        }
    }

    @media screen and (max-width:414px) and (orientation:portrait){
        #col{
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
        }
    }
  </style>
</head>
<body>
    <div class="card-columns" id="col" style="margin:0px 40px;">
        <div class="card" id="width">
            <img src="trolltunga.jpg" alt="" class="card-img-top">
            <div class="card-block">
                Text here
            </div>
        </div>

        <div class="card" id="width">
            <div class="card-header">
                Header here
            </div>
            <div class="card-block">
                Text here
            </div>
        </div>

        <div class="card" id="width">
            <img src="trolltunga.jpg" alt="" class="card-img-top">
            <div class="card-block">
                Text here
            </div>
        </div>

        <div class="card" id="width">
            <div class="card-header">
                Header here
            </div>
            <div class="card-block">
                Text here
            </div>
        </div>

        <div class="card card-block card-inverse card-primary text-xs-center">
            <blockquote class="card-blockquote">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer>
                <small>
                    Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
                </footer>
            </blockquote>
        </div>

        <div class="card" id="width">
            <div class="card-header">
                Header here
            </div>
            <div class="card-block">
                Text here
            </div>
        </div>
    </div>
</body>
</html>

Wordpress列计数无法在Media Query

2 个答案: