0

ここに画像の説明を入力してください2番目のdivを最初のdivと適切に位置合わせする方法....水平方向の位置合わせのためにディスプレイをインラインで表示しました...しかし、2番目のdivはまだ下にあります...24インチモニターに関して話している...

http://jsfiddle.net/ke6Se/1/embedded/result/

<div style=" width: 300px; display: inline-block;">
                  <span style="color: #000; font-size: 12px; font-family: arial; font-wieght: bold; margin-left: 45px;">Mark Up</span><span style="margin-left: 110px;">10%</span>
                  <div>
                    <span style="margin-left: 45px;">Non-Tax Amount</span><span style="margin-left: 59px;">0</span>
                  </div>
                </div>
4

2 に答える 2

0

まず第一に、Kevin がコメントで言ったように、あなたの html は間違っています。1 つの div が他の div の中にネストされています。それを修正してから、インラインブロックを2番目のdivに適用します

<div style=" width: 300px; display: inline-block;">
   <span style="color: #000; font-size: 12px; font-family: arial; font-wieght: bold; margin-left: 45px;">Mark Up</span><span style="margin-left: 110px;">10%</span>
</div> 
<div style="display:inline-block">
    <span style="margin-left: 45px;">Non-Tax Amount</span><span style="margin-left: 59px;">0</span>
</div>

ここに義務的なフィドルがあります

于 2013-02-15T20:25:17.333 に答える
0

あなたのフィドルは非常に忙しく、どこにあるのか正確にはわかりませんが、マージンと幅に関係しています。ラッパー<div>を固定幅に設定float: rightしてから必要な幅に設定<div>し、<div>s の幅がマージンとパディングを含めてラッパーの幅になるようにします。適切な説明については、この記事を参照してください。

http://www.webdesignerdepot.com/2012/09/when-pages-are-not-paper-the-designers-guide-to-layout-code/

また、静的な幅を設定したくない場合は、ウィンドウが縮小されたときに div がスタックしないように最小幅を設定すると役立つ場合があります。

これは、私が話していることの簡単な HTML マークアップです。

<div id="wrapper" style="width: 800px;">
    <div id="leftDiv" style="width: 600px; float: left;">
        I'm the left Div!
    </div>
    <div id="rightDiv" style="width: 200px; float: right;">
        I'm the right Div!
    </div>
</div>
于 2013-02-15T20:27:43.037 に答える