css 如何设置图片不超出显示？
如图，我的网页设计时在搜狗浏览器的兼容模式下就出现如图的情况，第四张图片跑出来了；但是在高速模式下正常。请问如何设置css让第四张图片换行显示?注意补充：我是希望第四张图...
如图，我的网页设计时在 搜狗浏览器的兼容模式下就出现如图的情况，第四张图片跑出来了；但是在高速模式下正常。
请问如何设置css 让第四张图片换行显示?
注意补充：我是希望第四张图片换行显示的，该怎么设置啊 展开
请问如何设置css 让第四张图片换行显示?
注意补充：我是希望第四张图片换行显示的，该怎么设置啊 展开
3个回答
展开全部
外围容器给固定宽度，不指定高度或高度auto（此时需要设置overflow:hidden）。
例：
.photoContainer { width:700px; }
.photoContainer li { width:200px; height:200px; margin:10px 0 0 10px; overflow:hidden; float:left; }
.photoContainer li img { width:180px; height:180px; }
<ul class="photoContainer">
<li><a href="#" target="_blank"><img src="images/1.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/1.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg" ></a></li>
</ul>
就是上面说的那样啊。
外围容器给固定宽度，不指定高度或高度auto（此时需要设置overflow:hidden）。
例：
.photoContainer { width:700px; }
.photoContainer li { width:200px; height:200px; margin:10px 0 0 10px; overflow:hidden; float:left; }
.photoContainer li img { width:180px; height:180px; }
<ul class="photoContainer">
<li><a href="#" target="_blank"><img src="images/1.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/1.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg" ></a></li>
</ul>
就是上面说的那样啊。
外围容器给固定宽度，不指定高度或高度auto（此时需要设置overflow:hidden）。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<style type="text/css">
.box_content{width:330px;border:1px solid #333;}
.box{width:98px;height:100px; margin:5px 5px 5px 5px;float:left;border :1px solid #333; background-color:#00f;}
.clear{clear : both;}
</style>
<div class="box_content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
</div>
</body>
</html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<style type="text/css">
.box_content{width:330px;border:1px solid #333;}
.box{width:98px;height:100px; margin:5px 5px 5px 5px;float:left;border :1px solid #333; background-color:#00f;}
.clear{clear : both;}
</style>
<div class="box_content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给四张图片的窗口一个固定宽度就好了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
