小编Hec*_*orr的帖子

我有4列.第1列和第4列的实际内容为150px,第2列为250px,第3列为370px.我希望在浏览器宽度更改时包装列.当我减小浏览器的宽度时,我希望每个列在包装之前缩小到它们的最小宽度.所以我想第4列会在宽度低于150px之后落到下一行,宽度为100%.

这就是我认为应该做的诀窍:

repeat(auto-fit, minmax(max-content, 1fr))

有没有办法实现这一点,而不通过固定宽度'max-content'？

这是我使用媒体查询和硬宽度的解决方案

https://jsfiddle.net/9hjb5qv8/

这是我在上面的小提琴中使用的html/css:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  grid-gap: 8px;
}

@media (max-width: 799px) {
  .container {
      grid-template-columns: minmax(max-content, 1fr);
  }
}

@media (min-width: 800px) {
  .container .p2,
  .container .p3 {
    grid-column: auto / span 2;
  }
}

.container > div {
  background-color: gray;
  text-align: center;
}

<div class="container">
  <div class="p1">
    <img src="https://via.placeholder.com/150x150">
  </div>
  <div class="p2">
    <img src="https://via.placeholder.com/250x150">
  </div>
  <div class="p3">
    <img src="https://via.placeholder.com/370x150">
  </div>
  <div class="p4">
    <img src="https://via.placeholder.com/150x150">
  </div>
</div>

这是我的测试文件http://www.ollitrop.com/index.html的链接

我正在创建一个带有"按年排序"标签的新下拉列表,它会从JSON文件中的"日期"中提取所有日期.理想情况下,按年排序下拉列表仅显示年份,因此在2008,2009,2010,2011和2012年,用户可以选择"2008",并且仅显示2008年的列表.

先感谢您!

JSON文件 http://www.ollitrop.com/sample.json

JS文件: http ://ollitrop.com/notice-grid.js

目前的JS:

    $(document).ready(function(){

    $.ajax({
        type: 'GET',
        url: 'sample.json',
        dataType: 'json',
        success: jsonParser
    });
    // hide grid on load
    $('#gridNotices').hide();
});

function jsonParser(json){
    $('#load').fadeOut();
    $.getJSON('sample.json',function(data){

        // Build Notices Grid
        var noticesGridDataTemplate = $('#gridNoticeTemplate').html(),
            noticesGridHTML = Mustache.to_html(noticesGridDataTemplate, data);
        $('#notice').html(noticesGridHTML);
        $('#gridNotices').DataTable({
            //"bPaginate": false,
            "bProcessing": true,
            "paging": false,
            initComplete: function () {
                this.api().columns(0).every(function () {

                    var column = this;

                    var selectDropdown = $('<select><option></option></select>')
                        .appendTo($('#sort-by-year'))
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()

                            ); …