javascript - 等间隔 PHP 生成的 div(不使用 flex)

Question

我有一个图像框，我想使用 PHP 随机显示存储在我的图像文件中的图像，这部分工作正常，我的问题是我需要使图像等间距填充网站的宽度。

这是它目前的样子:

我在右边放了一条红线，这是我需要 div 到达的地方。

我曾尝试使用 flex 方法来执行此操作，但是当页面缩小时它只会压缩所有 div，我不喜欢这个，因为我计划让网站响应。

目前我已经开始实现跨度拉伸(stretch)方式，但这似乎不起作用。

HTML:

<div id="tile_wrapper">
    <?php
        $res = $conn->query("SELECT * FROM randomimg ORDER BY RAND() LIMIT 16");
        while($row=$res->fetch_array())
        {
            include 'includes/tile.php'; 
        } 
    ?>
    <span class="stretch"></span>
</div>

PHP:

<div id="tile_image_wrapper">
    <a href="storepage.php?name=<?php echo $row['storename']; ?>" />
        <?php 
            echo 
                '<div id="tile_inner_wrapper">' .
                    '<img src="images/stores/' . $row['storename'] . '.png">' .
                '</div>';
        ?>
    </a>
</div> 

CSS:

#tile_wrapper {
    width:100%;
    margin-left: auto; 
    margin-right: auto;
     text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}


#tile_image_wrapper {
    display: inline-block;
    width:130px;
    border:1px solid #ccc;
    height:50px;
    border-radius: 3px;
    background-color:#fff;
    margin:3px;
}

#tile_inner_wrapper {
    height:50px;
    width:130px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

#tile_wrapper img {
    max-width:100px;
    max-height:40px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    position: relative;
    margin: 0 auto;
}

#tile_image_wrapper:hover {
    border:1px solid #aaa;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

感谢您的帮助!

Answer 1

从 PHP 文件创建 DOM 时出现错误，因为您立即关闭图像 block 周围的 a 标签并在定义 block 后尝试再次关闭它。尝试改变

<a href="storepage.php?name=<?php echo $row['storename']; ?>" />

到

<a href="storepage.php?name=<?php echo $row['storename']; ?>">

我制作了一个 jsfiddle 来展示这个:https://jsfiddle.net/3qp6fgwz/1/

您的 css 中也有一些拼写错误(*display:inline 和 .stretch 中缺少分号)。

另请注意，目前仅 Internet Explorer 5.5+ ( http://www.w3schools.com/cssref/css3_pr_text-justify.asp ) 支持 CSS3 属性 text-justify。