求教：如何利用Css实现三个图片并排，第四个图片换行,并且可以根据浏览器的大小，左右图片自动放缩

zhy_1993 2016-12-10 04:26:06

求教：如何利用Css实现三个图片并排，第四个图片换行,并且可以根据浏览器的大小，左右图片自动放缩。

下面这个是我写的代码，在电脑端显示可以实现三个图片一行，第四个图片切换到下一行，但是有个问题就是换到手机浏览或缩小浏览器后，就一行显示一个图片了。。请教下这个问题应该如何解决。

我想实现手机浏览的时候，跟电脑端浏览一样的效果，一行三幅图片，第四幅图片切换到下一行显示。

</div>



ul{width:auto;}

ul li { list-style: none; width:auto; height:auto; display:inline-block }

ul li a{ float: none; display:block;}

ul li a{ margin-bottom: 20px;margin-right: 15px;}

ul li a span{display:block;}

这段html 代码是 dedecms 的后台代码，可以实现自动调用缩略图



<div id="center">

<ul id="u1">

{dede:arclist row=100 imgwidth="100" imgheight="100" type="image"}

<li><a href="[field:arcurl /]"><img src='".$row['picname']."' width='293' height='293''></a></li>

{/dede:arclist} 

</ul>

</div>

现在的效果图

电脑版显示正常：

手机版显示不正常（希望可以实现跟电脑端一样，一行三幅图片，图片根据不同移动设备自动伸缩）

...全文

5288 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_20228985 2018-01-11

打赏
举报

哪里下载一个是bootstrap框架（css和js各一份），jQuery文件一份，这3个文件啊？

看着是个昵称 2016-12-12

打赏
举报

你这是图片本身的大小不一致，给li设置一个高度，然后设置图片的高度100%

zhy_1993 2016-12-10

打赏
举报

引用 2 楼 yanluofeihong 的回复:

按照这么写，就会实现你要的效果，下载链接的文件就行了，一个是bootstrap框架（css和js各一份），jQuery文件一份，写好之后就没问题了



<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<!--框架样式-->

	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

	<style type="text/css">

     .mat20{margin-top: 20px;}

      .demo ul li img{width: 90%;margin: 0 auto;}

	</style>

</head>

 <body>

   <div class="demo">

   	<ul>

   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>

   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>

   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>

   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>

   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>

   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>

   		<div class="clear"></div>

   	</ul>

   </div>



<!-- jquery引入 -->

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

<!-- bootstrap引入-->

<script type="text/javascript" src="js/bootstrap.min.js"></script>

</body>

</html>

您好，我用这段代码缩小也没问题了，但图片的规格不统一，图片有大有小这个要怎么解决啊?

看着是个昵称 2016-12-10

打赏
举报

按照这么写，就会实现你要的效果，下载链接的文件就行了，一个是bootstrap框架（css和js各一份），jQuery文件一份，写好之后就没问题了


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<!--框架样式-->
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style type="text/css">
     .mat20{margin-top: 20px;}
      .demo ul li img{width: 90%;margin: 0 auto;}
	</style>
</head>
 <body>
   <div class="demo">
   	<ul>
   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>
   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>
   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>
   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>
   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>
   		<li class="col-md-4 col-sm-4 col-xs-4 mat20"><img src="images/photo.png"></li>
   		<div class="clear"></div>
   	</ul>
   </div>

<!-- jquery引入 -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- bootstrap引入-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

看着是个昵称 2016-12-10