2012-01-10 5 views
0

ルック:divやspanを垂直に整列させ、反対方向に浮動させる方法は?例で

<td> 
    <div id='a'></div> 
    <div id='b'></div> 
</td> 

私はDIV#aは左に浮上させることにしたい、DIV#bは右に浮かべ、そしてそれらの両方が垂直に配向されます。どうやってするか?

例:https://usosweb.mimuw.edu.pl/kontroler.php?_action=actionx:katalog2/index() 入力テキストの1つを使用して、オートコンプリートの脚注を見てください。私は同様の効果を得たいと思っていますが、どちらも "列"を中立に垂直に整列させています(その欠如をお詫びします)。

+0

なぜあなたはそれを行うのでしょうか? –

+0

私はjsで書く何らかの種類のオートコンプリーに必要です。 – santino

+0

それはあなたの要求にどのように関連していますか? –

答えて

0

私はこれがあなたが求めているものだと思う:私はここでデモをした:http://jsfiddle.net/RK2ak/

<div class="wrap"> 
<p id="a"> test</p> 
<p id="b"> test</p> 
</div> 

#a{ 
    float:left; 
} 
#b{ 
    float:right; 
} 
.wrap{ 
    width:300px; 
} 
0

を、あなたが実際にやろうとしているかについては何も言ってはいけないときに答えるために、その難しいです。 次は良いしませんが、それはあなたの質問に答える:あなたの更新に基づいて

<div> 
    <div id="a">a</div> 
    <div id="b">b</div> 
</div> 

<style> 
    div { width: 100px } 
    #a{ background: red; float:left } 
    #b{ background: blue; float:right } 
</style> 

EDIT

を、あなたが必要なものを行の高さである:

<div id="container"> 
    <div id="a"> 
    <p>lorem ipsum whatever</p> 
    </div> 
    <div id="b"> 
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> 
    </div> 
</div> 

<style> 
    #container { width: 500px } 
    #a,#b{ display: block; float:left; width: 240px; background: red; line-height: 35px; height:35px } 
    p{ line-height: 1em; display: inline-block; } 
</style> 

This updated Fiddleを示して概念。基本的には、容器はheightline-heightを必要とするので、height = line-heightとなる。

+0

私は私の質問をparticullarizedしました。 – santino

+0

例のリンクに基づいて回答が更新されました。 –

0

両方のdivが、左に1つ、右に1つ、垂直にセンタリングされているように思えます。垂直方向の位置合わせは、CSSでは常に難解でしたが、今ではシンプルで洗練されたソリューションがいくつかありますが、最近導入されたばかりなので、あまり互換性がありません。伝統的な方法はテーブルを使用することですが、<div>の高さを知っていれば避けることができます。

ここでは、#left#rightが常に100pxの高さで、ドキュメント本体を基準にレイアウトされていると仮定するレイアウトの例を示します。 (fiddle

HTML

<body> 
    <div id='pad'></div> 
    <div id='left'>left</div> 
    <div id='right'>right</div> 
</body> 

CSS

*  {margin:0; padding:0;} 
body {position:absolute; width:100%; height:100%;} 
#pad {height:50%; min-height:50px; margin-bottom:-50px;} 
#left {float:left; width:100px; height:100px; background:#f88;} 
#right {float:right; width:100px; height:100px; background:#88f;} 
関連する問題