在不使用任何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
想要使用CSS将div元素的内容分成多列来显示,可以使用columns属性。columns属性一个简写属性,可以设置列数和列宽,用于设置分栏模块。下面本篇文章就来给大家介绍一下columns属性,希望对大家有所帮助。
columns 属性是一个简写属性,一次可以采用多个值;用于设置列宽和列数。
语法:
属性值:
● auto: 这会将列宽和列计数值设置为其浏览器默认值。
示例:
效果图:
注意:如果未指定column-width和column-count中的任何值,则浏览器默认将其值设置为auto。
● column-width和columns-count :用于使用整数值指定列宽和列数。
效果图:
浏览器支持:
● Chrome 50.0, 4.0 -webkit-
● Edge 10.0
● Firefox 52.0, 9.0 -moz-
● Safari 9.0, 3.1 -webkit-
● Opera 37.0, 15.0 -webkit- 11.1
.photo img{margin:10px 0 0 10px
border:none
height:150px
width:150px
}
改为
.photo img{
margin:10px 0 0 0
border:none
height:150px
width:150px
}