关于HMTL display的一个用法问题

<!DOCTYPE html>




<br> * {<br> margin: 0px;<br> }<br> #bigImg div{<br> display:inline;</p> <p>}<br>

    <div id="bigImg ">
       <div style="background:red;width:100px;height:100px"></div>
        <div style="background:black;width:100px;height:100px"></div> 
        <div style="background:green;width:100px;height:100px"></div>
    </div>


这是我写的所有代码，我想让三个DIV区一行排列，但是失败了，为什么呢？

把你id里面的空格去掉,，display:inline-block

<style>
*{margin: 0px; }

#bigImg div{display:inline-block;}
</style>
<body>

     <div id="bigImg">
       <div style="background:red;width:100px;height:100px"></div>
        <div style="background:black;width:100px;height:100px"></div> 
        <div style="background:green;width:100px;height:100px"></div>
    </div>
</body>

display改成 inline就变成内联元素了，而

<div></div>

中间没内容，所以他的宽度高度都是0，所以就显示不出来。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
#bigImg div{
       display:inline-block;
    }
</style>
</head>
<body>
    <div id="bigImg">
        <div style="background:red;width:100px;height:100px">122</div>
         <div style="background:black;width:100px;height:100px">121</div> 
         <div style="background:green;width:100px;height:100px">1212</div>
     </div>
</body>
</html>

你可以直接用一个div 包 然后在图形界面上拉动

div元素默认是 display: block; 所以你这里设置dispaly:inline；是无效的。

所以你可以换成span元素试下，你就知道了；

代码示例：
图片说明

图片说明
如果你想要所有子级div处于同一水平线上的话，建议用float：left，然后通过padding内边距与margin外边距来调整位置
你可以直接将display：inline改为float：left浮动就OK