Divのテキストを含む異なる位置と画像を含むDivを含む

StackOverflow https://stackoverflow.com/questions/4185121

  •  10-10-2019
  •  | 
  •  

質問

いくつかのDiv要素の概要に問題がありました。

次の構造を手に入れました。

<div id="skillcontent">
  <div id="skillname" class="inline">
   <div class="skilllist">
    <div><h3>[SKILL]</h3></div>
    <div><h3>[SKILL]</h3></div>
   </div>
  </div>

  <div id="skillstars" class="inline">
   <div class="skilllist">
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
   </div>
  </div>

  <div id="skillinfo" class="inline">
   <div class="skilllist">
    <div><h4>[YEARS],[LEVEL]</h4></div>
    <div><h4>[YEARS],[LEVEL]</h4></div>
   </div>
  </div>
 </div>

CSS：

.skilllist div {
    padding: 0px;
    margin: 0px;
    display: block;
    height: 25px; /*same height as star images*/
}

div.inline {
    display: inline-block;
}

h3 {
    font-size: 18px;
    color: #5b5b5b;
    margin: 0px;
}

h4 {
    font-size: 18px;
    color: #808080;
    margin: 0px;
}

img {
    vertical-align: bottom;
}

テキスト（H3およびH4）要素を含むDivは、画像を含むDivとして少し小さくなります。要素にマージンやパディングはありません。すべてのdivの高さは同じですが、テキストを含むクラスのスキルリストを備えたDivの上にいくつかの空白があります。 Divの上に画像を含む空白はありません。なぜこれがそして、どうすれば修正できますか？

例： クリック

役に立ちましたか？

解決

追加してみてください vertical-align:top; すべてのアイテムのCSSに誤って調整されます。テストページでFireBugを使用してこれを行ったときに機能しました。

他のヒント

いくつかのこと：

  • あなたはHTML要素を誤用しているようです： h3, h4, 、などです 見出し.
  • 一方、あなたはあまりにも多くのDivを使用します。存在する他の多くのHTML要素を考慮してください。たとえば、あなたが「スキルスト」と呼ぶ要素はリストになります（リスト）ol,ul).
  • そのような小さなピクセルギャップが心配な場合は、HTML/CSSがあなたにとって間違ったツールかもしれません。 HTML/CSSの概念全体は、柔軟性があり、異なるシステムで異なるレンダリングを可能にし、ピクセル完璧な設計ツールではないようにします。
  • あなたの問題は、デフォルトでは、画像がフォントベースラインに座って脱denderのためにスペースを残すインライン要素であるためかもしれません。設定してみてください vertical-align: bottom 画像に。

あなたのCSSを見ることなく、言うのは難しいです。

すべての要素には、標準/ブラウザが提供するデフォルトのスタイリングがあることを覚えておく必要があります。これをトランプするには、あなた自身の価値を明示的に定義する必要があります。

たとえば、ほとんどのブラウザは、ページの背景のデフォルト色を次のように定義します。 #FFFFFF

それを変更するには、独自の価値を提供する必要があります。

お役に立てれば。

ブラウザが自動的にHタグ（Pおよびその他のタグ）に自動的に追加されるマージンにかかっている可能性があります。

CSSリセットスタイルシートを使用して、さまざまなブラウザーが異なるレンダリングを行うデフォルトのマージンとパディングの多くを削除するのに役立ちます。で1つあります http://developer.yahoo.com/yui/3/cssreset/

私はトビアスマイに同意します - デモページなどがあれば助けてくれるでしょう。

いくつかのCSSを投稿したり、jsfiddle.netをセットアップしたりできますか？そうでなければ、あなたがあなたの分裂を修正するのを助けるのは難しいです。

//編集

ここに行きます、私はあなたのマークアップを完全に修正しました：

<div id="skills">
<div class="skillA">
  <h3 class="skill">Skill A</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
<div class="skillB">
  <h3 class="skill">Skill B</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
</div>

そして、働くul liを持つCSS

#skills{
background-color:lightgreen;
overflow:auto;
}
.skillA, .skillB{
overflow:auto;
margin-bottom:10px;
}
ul.skillRow{
display: inline;
}
ul.skillRow li{
list-style-type: none;
float:left;
}
p.foo{
float:left;
font-size:18px;
padding:6px;
}
h3.skill{
float:left;
display:inline;
padding:6px;
}

これがフィドルリンクです： http://jsfiddle.net/tobiasmay/gkrks/

追加 vertical-align: top また vertical-align: bottom （どちらの方が好きか）に div.inline ルール。これにより、すべてのブラウザで機能します。

画像を備えたDIVが他のものよりも少し高い位置にある理由は インラインブロックのコンテンディングラインボックスに整列する方法:

（...）[b] Oxesは、封じ込めブロックの上部から始まり、次々に水平に配置されます。これらのボックスの間には、水平マージン、境界、およびパディングが尊重されます。 （...）線を形成するボックスを含む長方形の領域は ラインボックス.

(...)

ラインボックスは、常に含まれるすべてのボックスに十分な高さです。 ただし、含まれる最も高いボックスよりも背が高い場合があります（たとえば、ベースラインが並んでいるようにボックスが揃っている場合）。 ボックスBの高さがそれを含むラインボックスの高さよりも小さい場合、ラインボックス内のBの垂直アライメントは、 「垂直アライグ」 財産。

大胆な部分に注意してください。のデフォルト値 vertical-align は baseline. 。例の画像は、ラインボックスに移動して、周囲のテキストのベースラインに合わせます。そうすることで、彼らはラインボックスの高さを増やし、テキストDIVの上に余分な空白を残します。

まだ何が起こっているのかよくわからない場合は、増やしてみてください font-size の h4 あなたの例では、たとえば、 32px, 、および固定を削除します height から .skilllist div.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top