我有一个图像框,我想使用 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
}
感谢您的帮助!
最佳答案
从 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。
关于javascript - 等间隔 PHP 生成的 div(不使用 flex),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37719374/