1. ホーム
  2. 質問と答え
  3. display：境界線付きのインラインブロック？

display：境界線付きのインラインブロック？

2011-07-03 16 views
3

display：境界線付きのインラインブロック？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> 
 
    <head> 
 
     <style type="text/css"> 
 
     body { margin:0;padding:0;} 
 
     </style> 
 
    </head> 
 
    <body> 
 
    <div> 
 
     <div style="width:1000px;margin:0 auto;"> 
 
      <div style="width:700px;display:inline-block;">1</div> 
 
      <div style="width:300px;display:inline-block;">2</div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
    </html>

私はこれらのブロックをフラッシュしたいが、現在は第二のブロックを押し下げます。.. 私は296pxに第2ブロックの幅を変更する場合、それが動作する...

私は「ドンclear:both;でブロックをもう1つ必要とするため、float:leftを使用します。

出典

2011-07-03 Kirill Firsov

+0

wrapping divにclearfixクラスを追加します。https://css-tricks.com/snippets/css/clear-fix/ – circusdei

答えて

6

Thisをレンダリングしません（A、例えばスパン）を自然にインラインである要素にインラインブロックは何です現時点では持っているが、小型化：

私はfloatを使用したくないが：それは 「クリア：両方;」との1つの以上のブロックを必要と ので残しました。

float: leftを使用すると、clear: bothを持つ要素を追加することなく、float Sを含める/クリアすることができます。これを行うには、親要素にoverflow: hidden（またはclearfix）を追加します。

あなたはdisplay: inline-blockに固執したい場合は...

最初にやるべきことは2 divs間の空白を削除しています。

  • Without whitespace

    • あなたがborderを追加したい場合はWith whitespace

    出典

    2011-07-03 16:57:02 thirtydot

    0

    divの幅に枠の幅を含めます。

    画面に300pxの幅で表示したい場合は、298px（左の境界では1px、右の境界では+ 1px = 300px）にします。これは、パディングにも当てはまります。

    IEボックスモデルと比較してw3ボックスモデルを読み上げてください。

    出典

    2011-07-03 16:49:57 AlienWebguy

    1

    あなたは表示のみ与えることができます： そうでなければ、あなたの要素は、（例えばIE7-）古いブラウザでは正しく

    出典

    2011-07-03 16:50:29

    2

    2つの要素（300 + 700pxの場合は合計1000px）を使用する場合は、コンテナにfont-size：0を設定します。これは非常に論理的です。この場合、align：justifyのようなインラインブロックのすべてのメリットを使用できます。

    出典

    2012-01-25 05:02:24 350D

    関連する問題

     関連する問題