0

ご覧のとおり、メインの div (id="main_div") があり、これには 2 つの div id="logo" div が含まれており、これにはテキストのみを含む画像 id = "intro" へのリンクが含まれています

http://jsfiddle.net/omerbach/y7n2b/

 <div id="main_div">
      <div id="logo" class="headers">
        <a href="http://www.hawkaviation.com" target="_blank">
          <img src="http://www.badcomp.com/wp-content/uploads/2011/03/recommend-hawk.jpg"  alt="Hawk Aviation" />
       </a>
      </div>
      <div id = "intro" class="headers">
        PLACE YOUR ORDER NOW !!! 
      </div>
    </div>

インラインブロック

http://jsfiddle.net/omerbach/NneB6/

body {
    background : white;
}
#main_div {
    background:gray;
    border : solid 3px red;    
}
.headers {
    border : solid 1px black;    
    display : inline-block;
}

いくつか質問があります: インラインを使用する場合、画像は周囲の div にありません (黒い境界線が表示されます) インライン ブロックを使用する場合、画像は周囲の div に表示されます (黒い境界線が表示されます)

inline-block の目的は要素をインラインにする方法だと思いましたが、幅と高さ、上下のマージンとパディングなどの設定などのブロック機能を保持しています。私の場合、インラインブロックを使用する理由がわかりません。

また、両方の例に関して、内側の秒が最初のものの下に配置されるのはなぜですか?それはデフォルトの動作ですか?

ありがとう

4

1 に答える 1

0

答えはイエスです:inline-block要素は依然としてブロックです。ブロックには特定の高さと幅があるため、境界線を配置すると、境界線の大きさがわかります。

一方、インライン要素は幅や高さが一定ではありません。これを取るstrong

  Lorem ipsum dolor <strong> sit amet, consectetur adipisicing elit, sed</strong>

1 行の高さのように見えるかもしれませんが、画面が十分に狭い場合は次のようになります。

Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed

インラインブロックではできません。さて身長は？二行？そして幅は？ネガティブ？その終わりは、その始まりの左側にあります!

言い換えれば、あなたは本当に言うことはできません. また、ブラウザもできません。したがって、例の img のように大きな要素がある場合、インライン div は img 全体を含むようにはなりません。img は単純にオーバーフローします。

結論として、ブロック (インラインまたはその他) を使用するか、実際のインライン要素を使用するかは、状況によって異なります。どのような違いがあり、どのように処理するかを理解してください。

于 2013-06-27T10:22:35.750 に答える