文字の周囲にボックスを形成するdivタグのCSSアライメント

3つの文字または単語を同じサイズのボックスに表示するパターンを作成しようとしています。ボックスは接続されていて色が異なります。最終的には、これらのスタイルアイテム "display：inline; float：left;"で完成しました。しかし、今、テキストの前後にテキストを置くか、またはこれらのセットの2つのセットを同じスクリーンに置くと、物事が狂ってしまいます。文字の周囲にボックスを形成するdivタグのCSSアライメント

サンプル：http://jsfiddle.net/cmjmb/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css"> 
div.test { 
    border: 1px solid black; 
    align: center; 
    padding: 10px; 
    width: 50px; 
    font - size: 300 % ; 
} 
div.boxtype1 { 
    background - color: #2BFFE3;display:inline;float:left; 
} 
div.boxtype2 
{ 
background-color:# 00806F; 
    display: inline; 
    float: left; 
} 
</style> 
</head> 

<body> 
Before 
<div class='test boxtype1'>A</div> 
<div class='test boxtype1'>B</div> 
<div class='test boxtype2'>C</div> 
After 
<br /><br /> 

Before 
<div class='test boxtype1'>A</div> 
<div class='test boxtype1'>B</div> 
<div class='test boxtype2'>C</div> 
After 
<br /><br /> 

</body> 
</html>

出典

2012-03-01 NealWalters

'float：left'は自動的に' display：block'要素を作るので、 'display：inline'は冗長です。あなたの質問から、 'float'がどのように動作するのかという基本的な誤解のように聞こえます。 – Gareth

真実、私はドキュメントを読んで、私はまだいくつかのparmsの意味を取得しません。表示されずにうまく動作：インライン。 display：inlineからdisplay：inline-blockに変更すると、ボックスのサイズが変更されますが、その理由が分かりません。 – NealWalters

'display：inline'は、要素を段落内の単語のように振る舞います。サイズを与えたり位置に影響を与えることはできません。前の要素/テキストの直後に配置されます。 'display：inline-block'は、要素が幅と高さを持つことができる点を除いて同様です。前後の要素/テキストが縦に整列する方法は、cssプロパティ 'vertical-align'の影響を受けます。 – Gareth

をfloat: leftを使用することにより、要素の通常の流れの外箱を取り、彼ら「フロート'を左に置き、通常のテキストはそれらの周りを浮動します。おそらくそれはあなたが望んでいたものではありません。

float: leftを省略した場合は、説明したようになります。それでも箱の間にはスペースがあります。これは、2つの単語の間に挿入される通常の空白です。 3つのdivを1つの行に書き込むことで、間にスペースを入れずにそれを避けることができます。

出典

2012-03-01 23:13:03 jammon

ありがとうございます：http://jsfiddle.net/uVZeT/2/ – NealWalters

例えば<p>ように、タグ内のそれらのテキストノードを置きます。あなただけdivとpためdisplay: inline-blockを使用することができます。

http://jsfiddle.net/elclanrs/cmjmb/4/

出典

2012-03-01 23:02:11 elclanrs

ボックスは、「コントロール」のように見えるので、私はディスプレイを持っています：インライン;フロート：左;これは私が今得ているものです：http://jsfiddle.net/fXz78/ – NealWalters

それとも、使用することができます。

br { clear: both;}

出典

2012-03-01 23:05:31 Elen

文字の周囲にボックスを形成するdivタグのCSSアライメント

答えて

関連する問題