最常用的一种方法:就是浮动,浮动之后会自动往右挤,挤不下就到第二行了。
<ul><li>第一张图片</li>
<li>第二张图片</li>
<li>第三张图片</li>
<li>第四张图片</li>
<li>第五张图片</li>
<li>第六张图片</li>
<li>第七张图片</li>
<li>第八张图片</li>
</ul>
<style> ul{width:800px height:200px} li{width:195pxheight:98pxmargin:1px auto float:leftlist-style-type:none}
</style>
无论你右边文字有多少,始终都会在图片右边,不会再跑到图片下边了。代码如下,好好研究:
<style type="text/css">
.item .pic { float:leftmargin-right:10pxwidth:100pxheight:100px}
.item .content {float:leftwidth:500px}
</style>
<div class="item">
<div class="pic"><img src="a.jpg"></div>
<div class="content">文字部分</div>
</div>由于这个功能都要使用到浮动float,就需要对左右两边的模块都要定义款度,不然的话,默认的都是100%,是填充整个外部容器,是无论如何都不能左右显示了。
楼主您好。在不使用任何CSS的情况下,您直接插入4张图片,比如:
<img src="1.gif" alt="1.gif" />
<img src="2.gif" alt="2.gif" />
<img src="3.gif" alt="3.gif" />
<img src="4.gif" alt="4.gif" />
它们就是在同一行显示的
-----补充-----
你贴的代码不能说明问题。
如果图片不能在一行显示,一般来说原因如下:
1.包含图片的容器宽度太小
2.图片的显示模式设置为了块级display:block