你应该使用<span>而不是<div> 内联。因为div是块级元素，而您的要求是内联块级元素。

以下是根据您的要求提供的html代码:

<div class="main-div">
 <div>foo</div>
 <div>bar</div>
 <div>baz</div>`
</div>

你有两种方法

使用简单的显示:inline-block; 或者使用float:left;

所以你需要改变显示属性display:inline-block;有力地

一个例子

div {
    display: inline-block;
}

两个例子

div {
    float: left;
}

你需要清除浮动

.main-div:after {
    content: "";
    clear: both;
    display: table;
}

内联div是网络的一个怪物，应该被打败，直到它变成一个span(至少10次中有9次)…

<span>foo</span>
<span>bar</span>
<span>baz</span>

.．.回答最初的问题…

如前所述，display:inline可能是您想要的。一些浏览器还支持内联块。

http://www.quirksmode.org/css/display.html#inlineblock

< span > ?

<div class="cdiv">
<div class="inline"><p>para 1</p></div>
 <div class="inline">
     <p>para 1</p>
     <span>para 2</span>
     <h1>para 3</h1>
</div>
 <div class="inline"><p>para 1</p></div>

http://jsfiddle.net/f8L0y5wx/

<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
    #div01, #div02, #div03 {
                                float:left;
                                width:2%;
    }   
 </style>
 <div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 //solution 2

 <style>
      #div01, #div02, #div03 {
                                  display:inline;
                                  padding-left:5px;
      }   
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 /* I think this would help but if you have any other thoughts just let me knw      kk */