Question

我正在编辑一个包含图片滑块的网站，该图片滑块并排显示两个图片，但是当我在Chrome浏览器中查看网站时，图像并非如此相互内联：http://i754.photobucket.com/albums/xx182/rache_R/Untitled-1_zps6f3014ef.jpg

我使用php和html从数据库中获取数据，并根据收集的数据显示图像。我试图在我的CSS中单独定位图像，但它不起作用或影响两个图像。

是否有正确的方法单独定位图像或如何解决此问题？

php代码：

<?
                $result = $mysqli->query("SELECT * FROM stock");
                while($obj = $result->fetch_object())
                {
                    if($obj->id&1)
                        echo "<u1>"; ?>


                    <li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>">
                        <a href="#"><img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt=""></a>
                        <h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />&pound;<?=$obj->price?> each</h4></li>

所以我设法解决了它：

@media screen and (-webkit-min-device-pixel-ratio:0){
   #mi-slider li {
    vertical-align: top;
    }}

Answer 1

放置＆lt; ul＆gt; 的宽度非常大，可以并排显示两个图像，并为ul提供 style ='display：inline' ..您将获得内嵌图像

Answer 2

这更像是一个css问题。你有一个选项，使用内联列表或浮动。

我亲自列出内联列表，你也可以使用表，但这被认为是不好的做法。您也可以使用java脚本来计算位置，如果使用不当，这也是不好的做法。

如果你不知道如何在css中实现这些属性，W3schools.com应该是一个很好的参考。

下次请用静态信息替换你的php，这样看起来更好:)欢呼

将图像滑块中的图像对齐仅用于镀铬

2 个答案: