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

回复讨论(解决方案)

집

웹 프론트엔드

HTML 튜토리얼

css实现一行显示三张图片且多行显示问题。。_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:41 AM

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="/static/imghw/default1.png"  data-src="global/image/hlx.jpg"  class="lazy"   / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href="#"><span>河流信息</span></a> </li> <li> <img  src="/static/imghw/default1.png"  data-src="global/image/syd.jpg"  class="lazy"   / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href=""><sapn>水源地</sapn></a> </li> <li> <img  src="/static/imghw/default1.png"  data-src="global/image/qsk.jpg"  class="lazy"   / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href=""><sapn>地表水取水口</sapn></a> </li></ul><ul id="u2"> <li> <img  src="/static/imghw/default1.png"  data-src="global/image/qsh.jpg"  class="lazy"   / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href="wrBase/client!list.action"><sapn>取水用户</sapn></a> </li> <li><img  src="/static/imghw/default1.png"  data-src="global/image/pwk.jpg"  class="lazy"   / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href=""><sapn>入河排污口</sapn></a></li><li><img  src="/static/imghw/default1.png"  data-src="global/image/qyscd.jpg"  class="lazy"   / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href="wrMonitor/projectAmMonitor!list.action"><span>取用水测点信息</span></a></li></ul>

로그인 후 복사

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

回复讨论(解决方案)

最不科学的办法 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;}

로그인 후 복사

抱歉，上面有错误，试试下面这个：

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 span{display:block;}

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.