为了账号安全,请及时绑定邮箱和手机立即绑定

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

<!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>


正在回答

2 回答

刚试了一下,是由于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>


0 回复 有任何疑惑可以回复我~
#1

望尤 提问者

非常感谢!
2017-08-25 回复 有任何疑惑可以回复我~

<!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 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信