html如何让图片超过3张之后自动换行，请懂的老师和学长解决问题

发布网友发布时间：2022-05-07 11:04

共5个回答

热心网友时间：2023-10-27 22:22

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<script type="text/javascript">
var imgsum=35;//图片总数
for(var i=0; i< imgsum; i++){
if(i%4 != 0)
document.write("<td><img src='images/图片名称.jpg'></td>");
else
document.write("</tr><tr>");
}
</script>
</tr>
</table>

举一反三：
<style>
ul li{list-style-type:none;margin-left:0px; clear:both;}
li div{ float:left;}
</style>

<ul>
<li>
<script type="text/javascript">
var imgsum=35;//图片总数
for(var i=0; i< imgsum; i++){
if(i%4 != 0)
document.write("<div><img src='images/图片名称.jpg'></div>");
else
document.write("</li><li>");
}
</script>
</li>
</ul>

热心网友时间：2023-10-27 22:23

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
margin: 0 auto;
width: 1500px;
}
.box {
display: flex;
flex-wrap: wrap;
margin: 0 -8px;
}
.img-box {
width: 33.33%;
}
.info {
padding: 0 8px
}
img {
width: 100%;
display: block;
}
.counter {
padding: 0 8px;
}
</style>
</head>
<body>
<div class="box">
<div class="img-box">
<div class="info">
<img src="图片链接.jpg" alt="">
</div>
<div class="counter">我是小标题</div>
</div>
<div class="img-box">
<div class="info">
<img src="图片链接.jpg" alt="">
</div>
<div class="counter">我是小标题</div>
</div>
<div class="img-box">
<div class="info">
<img src="图片链接.jpg" alt="">
</div>
<div class="counter">我是小标题</div>
</div>
<div class="img-box">
<div class="info">
<img src="图片链接.jpg" alt="">
</div>
<div class="counter">我是小标题</div>
</div>

</div>
</body>
</html>

热心网友时间：2023-10-27 22:23

外面加一个父DIV，控制div的大小为你三个图片的宽度，注意，要把两个图片之间的缝隙考虑进去，要不就两个就换行了，满意请采纳追问该如何写呢？可以举个例子吗？

热心网友时间：2023-10-27 22:24

外面套个div 宽度设置具体数值或者100%，内容向左浮动并且宽度为父级div标签的三分之一当第四个的时候他就在第二行了

热心网友时间：2023-10-27 22:24

你这是什么站？电脑的还是手机的？整体宽度多少，看你的布局貌似没有宽度
方法1 ：固定的宽度，每块的宽度加上边距，就是外框的宽度，有了固定宽度，自然会挤下来换行。
方法2：百分百，或者弹性盒子模型

热心网友时间：2023-10-27 22:22

热心网友时间：2023-10-27 22:23

热心网友时间：2023-10-27 22:24

外面套个div 宽度设置具体数值或者100%，内容向左浮动并且宽度为父级div标签的三分之一当第四个的时候他就在第二行了

热心网友时间：2023-10-27 22:24

热心网友时间：2023-10-27 22:22

热心网友时间：2023-10-27 22:23

热心网友时间：2023-10-27 22:24

外面套个div 宽度设置具体数值或者100%，内容向左浮动并且宽度为父级div标签的三分之一当第四个的时候他就在第二行了

热心网友时间：2023-10-27 22:24