回答:
それはそれから何か別のものです：
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はWebの奇抜なユーザーであり、スパンになるまで（少なくとも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>代わり<div>にinlineを 使用する必要があります。divはブロックレベルの要素であり、要件はインラインブロックレベルの要素に対するものだからです。
ここにあなたの要件ごとのhtmlコードがあります：
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
display:inline-block;float:left;したがって、表示プロパティをdisplay:inline-block;強制的に変更する必要があります
例1
div {
display: inline-block;
}
例2
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でオーバーフロースタイルを自動に設定する必要があることです
これはひどい考えだと人々が言っているのを知っていますが、実際にコメントをタイル画像の下に表示したい場合に役立ちます。たとえば、Picasawebはこれを使用してアルバムのサムネイルを表示します。
例/デモのために参照してくださいhttp://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html（クラスGOOG-インラインブロック;私はここ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に設定すると、魔法のようにインラインブロック要素になります。
3つの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内に保持されることに注意してください。
<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 */