Answers:
那是另一回事：
div.inline { float:left; }
.clearBoth { clear:both; }<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->内联div是网络中的怪胎，应加以击败，直到它变成跨度（至少10次中有9次）...
<span>foo</span>
<span>bar</span>
<span>baz</span>
...回答原始问题...
尝试这样写：
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>阅读了这个问题和答案几次后，我所能做的就是假设您进行了大量的编辑，并且我怀疑您由于没有提供足够的信息而得到了错误的答案。我的线索来自br标签的使用。
向达里尔道歉。我将class =“ inline”读为style =“ display：inline”。即使您确实使用了语义可疑的类名，您也将获得正确的答案；-)
br就我的喜好而言，错过了提供结构布局而不是文本布局的用法太普遍了。
如果您要在这些元素中放置多个内联元素divs，则应浮动这些div而不是使它们内联。
浮动div：
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
内嵌div：
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
如果您追求前者，那么这就是您的解决方案，并且会丢失这些br标签：
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
请注意，这些div的宽度是可变的，因此，如果要控制行为，请随意在其上放置宽度。
谢谢，史蒂夫
您应该使用
<span>而不是inline的<div>正确方法 。因为div是一个块级元素，所以您需要内联块级元素。
这是根据您的要求的html代码：
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>display:inline-block;float:left;因此您必须display:inline-block;强制更改显示属性
例子一
div {
display: inline-block;
}例子二
div {
float: left;
}你需要清除浮球
.main-div:after {
content: "";
clear: both;
display: table;
}如前所述，display：inline可能就是您想要的。某些浏览器还支持嵌入式块。
只需使用带有“ float：left”的包装div，然后将还包含float：left的框放在其中：
CSS：
wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}
.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}HTML：
<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>我会使用span或将div浮动到左边。浮点数的唯一问题是您必须先清除浮点数，否则包含div的溢出样式必须设置为auto
我知道人们说这是一个糟糕的主意，但是如果您想执行诸如在其下带有注释的平铺图像之类的操作，那么在实践中它可能会很有用。例如Picasaweb使用它来显示相册中的缩略图。
参见示例/演示http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html（类goog-inline-block；在这里我将其缩写为ib）
/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }有了CSS，就可以将div设置为ib类，现在神奇地是一个内联块元素。
您需要包含三个div。这是一个例子：
的CSS
div.contain
{
margin:3%;
border: none;
height: auto;
width: auto;
float: left;
}
div.contain div
{
display:inline;
width:200px;
height:300px;
padding: 15px;
margin: auto;
border:1px solid red;
background-color:#fffff7;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}注意：border-radius属性是可选的，仅在CSS3兼容浏览器中有效。
的HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>请注意，div'foo''bar'和'baz'分别保存在'contain'div中。
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>我认为您可以使用这种方式而无需使用任何CSS-
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>现在，您正在以这种方式使用块级元素，从而得到不需要的结果。因此，您可以内联元素，例如span，small等。
<span>foo</span><span>bar</span><span>baz</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><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 */