css实现一行显示三张图片且多行显示有关问题。-HTML教程-爱易网页

css实现一行显示三张图片且多行显示有关问题。

日期：2014-05-17　浏览次数：20721 次

css实现一行显示三张图片且多行显示问题。。

如图就想要一个这样的效果在手机上显示，我已经写了一些代码如下：



<style>

ul{width:auto;}

ul li { list-style: none; width:auto; height:auto; clear: none; float:left;display:inline }

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

ul li a span{display:block;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width; initial-scale=1.2; minimum-scale=1.0; maximum-scale=2.0"/>

<title>基础信息</title>

</head>

<body>

<div id="center">



<ul id="u1">

<li>

 <img src="global/image/hlx.jpg" /><a href="#"><span>河流信息</span></a>

 </li>

 <li>

 <img src="global/image/syd.jpg" /><a href=""><sapn>水源地</sapn></a>

 </li>

 <li>

 <img src="global/image/qsk.jpg" /><a href=""><sapn>地表水取水口</sapn></a>

 </li>

</ul>





<ul id="u2">

 <li>

 <img src="global/image/qsh.jpg" /><a href="wrBase/client!list.action"><sapn>取水用户</sapn></a>

 </li>

 <li>

<img src="global/image/pwk.jpg" /><a href=""><sapn>入河排污口</sapn></a>

</li>

<li>

<img src="global/image/qyscd.jpg" /><a href="wrMonitor/projectAmMonitor!list.action"><span>取用水测点信息</span></a>

</li>

</ul>

现在可以一行显示三张图片问题是怎么让第二行在第一行的下面显示，实现图片上的效果。。现在显示的都跑别的地方去了。。。求各位帮忙，在线等。。

css

------解决方案--------------------
最不科学的办法 table吧

------解决方案--------------------
试试这个CSS：



l{width:auto;}

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

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

ul li a span{display:block;}

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

css实现一行显示三张图片且多行显示有关问题。

相关资料更多>

推荐阅读更多>

css实现一行显示三张图片且多行显示 有关问题。

相关资料更多>

推荐阅读更多>

css实现一行显示三张图片且多行显示有关问题。