Question

我正在使用HTML和CSS处理简单的平铺视图。它工作正常，没有任何严肃的内容，也看起来不错，但如果我添加任何图像或类似的东西，它会立即使它看起来像垃圾（网站可以找到here）我做错了什么？我看过填充物，那个空间里什么都没有！

我的代码如下：

ul.tiles {
    max-width: 620px;
    height: auto;
}

ul.tiles li {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    background: #FAFAFA;
    z-index: 0;
    margin: 5px 5px 5px 5px;
    transition: all .15s ease-in-out;
    box-shadow: 0 2.5px 5px 0 rgba(0,0,0,.2);
}

ul.tiles li * {
  width: 100%;
  height: auto;
}

ul.tiles li:hover {
    background: #FAFAFA;
    z-index: 100;
    transform: scale(1.0,1.0);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

<div class="row" style="">
    <div class="col-md-9">
        <ul class="tiles">
            <li><img src="//www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></li>
            <li><img src="//pbs.twimg.com/profile_images/602729491916435458/hSu0UjMC.jpg" /></li>
            <li><a href="#">Topic 3</a></li>
            <li><a href="#">Topic 4</a></li>
        </ul>
    </div>
</div>

Answer 1

添加vertical-align:top

ul.tiles li {
    background: #fafafa none repeat scroll 0 0;
    box-shadow: 0 2.5px 5px 0 rgba(0, 0, 0, 0.2);
    display: inline-block;
    height: 200px;
    margin: 5px;
    position: relative;
    transition: all 0.15s ease-in-out 0s;
    vertical-align: top;/*add this property*/
    width: 200px;
    z-index: 0;
}

Answer 2

function formatRepo (repo) {
    if (repo.loading) return repo.text;

    var markup = "<div class='select2-result-repository clearfix'><div class='select2-result-repository__img'><img src='" + repo.img + "' width='80' height='80' /></div><div class='select2-result-repository__meta'><div class='select2-result-repository__title'>" + repo.full_name + "</div>";

    markup += "<div class='select2-result-repository__statistics'><div class='select2-result-repository__type'><i class='fa fa-flash'></i> Type : " + repo.type + "</div><div class='select2-result-repository__usecase'><i class='fa fa-eye'></i> Use case : " + repo.usecase + "</div></div></div></div>";

    return markup;
}

function formatRepoSelection (repo) {
    return repo.full_name;
}

// Init select2
$(".select2").select2({
    ajax: {
        type    : "GET",
        url     : "{{ path('tag_search_js') }}",
        dataType: 'json',
        delay   : 250,
        data    : function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, params) {
            params.page = params.page || 1;

            return {
                results: data.items,
                pagination: {
                    more: (params.page * 30) < data.total_count
                }
            };
        },
        cache: true
    },
    placeholder: "Select a tag",
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});

尝试将高度固定

带内容的平铺填充不符合要求

2 个答案: