请问这四张图片为什么没办法在同一行排列？-慕课网

请问这四张图片为什么没办法在同一行排列？

来源：12-3 我要和你站一起 - 内联元素

望尤

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>

1 0

望尤

非常感谢！

2017-08-25 22:02:45

共 1 条回复 >
慕粉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了

0 0
慕函数1342074

2017-08-25 17:47:45

id选择器是唯一的，你换类选择器试试

0 0

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225297 学习 · 18230 问题

查看课程

相似问题

多张图片怎么同一行显示

回答 2

为什么我的元素没有像实例一样，在同一排显示，而是垂直排列的？

回答 5

原来是一张图片，当鼠标经过时变成另一张图片，怎么做啊

回答 2

为什么li没有排成一行？谢谢

回答 5

怎么将网页背景设计为一张图片

回答 4

打开慕课网App查看更多内容