请问这四张图片为什么没办法在同一行排列？
望尤
2017-08-25 17:26
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8"/>
<style>
img{width:350px; height:220px; display:block; margin:auto;}
#div1{display: inline; margin: 30px;}
#div2{background-color:#fff; width:350px; height:60px; margin:auto;}
</style>
</head>
<body style="background:#ddd;">
<div style="text-align: center; ">
<div id="div1">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
<div id="div2"></div>
</div>
<div id="div1">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
<div id="div2"></div>
</div>
<div id="div1">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
<div id="div2"></div>
</div>
<div id="div1">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
<div id="div2"></div>
</div>
</div>
</body>
</html>3回答
-
- 慕函数1342074
- 2017-08-25 18:05:39
刚试了一下,是由于img设定为块级元素和没有设置div2为行级元素的原因,毕竟块级元素会自动换行的。还有屏幕分辨率也会影响浏览器上的排版。
<style>
img{width:350px; height:220px; margin:auto;}
#div1{display: inline; margin: 30px;}
#div2{display: inline;background-color:#fff; width:350px; height:60px; margin:auto;}
</style>
-
- 慕粉1404436559
- 2017-09-20 20:09:57
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8"/>
<style>
img{width:320px; height:220px;}
</style>
</head>
<body style="background:#ddd;">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
</body>
</html>
这样就在tongyihang了
-
- 慕函数1342074
- 2017-08-25 17:47:45
id选择器是唯一的，你换类选择器试试
初识HTML(5)+CSS(3)
1230392 学习 · 19084 问题
相似问题