0

http://www.martenminkema.nlを参照してください

各エントリのレイヤーは、そのエントリに含まれるテキストの高さのみを取得します。画像の高さが考慮されていないため、レイアウトマークアップで問題が発生する場合があります。

html：

<div id="entry-296" class="hentry entry gedachten">
<a href="http://www.martenminkema.nl/gedachten/2009/06/autobahnbar-1.html" rel="bookmark"><span class="date">12.06.09</span></a><h2 class="entry-title"><a href="http://www.martenminkema.nl/gedachten/2009/06/autobahnbar-1.html" title="Geplaatst onder Gedachten op 12 juni 2009 23:32 in de categorie(&euml;n): buitenland, met de volgende tags: berlijn">Autobahnbär</a></h2><div class="icoontje" title="Gedachten"><div class="linkwrapper transparent"><a href="http://www.martenminkema.nl/gedachten/2009/06/autobahnbar-1.html" class="clickable">&nbsp;</a></div></div>
<div class="entry-content">
<a href="http://www.martenminkema.nl/gedachten/Afbeeldingen/Autobahnb%C3%A4r-in-Berlijn.jpg" rel="lightbox" title="Beer aan de snelweg in Berlijn (foto: M. Minkema)"><img src="http://www.martenminkema.nl/gedachten/assets_c/2009/06/Autobahnbär-in-Berlijn-thumb-150xauto.jpg" width="150" height="112" alt="" class="icoon"/></a>
Beer met uitzicht, Tierpark Berlin op een vroege ochtend.</div>
</div>

css：

div.entry {
clear: both;
display: block;
font-size: 12px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
text-align: left;
width: 350px;
}

a[rel='lightbox'] {
color: black;
cursor: auto;
display: block;
font-size: 12px;
font-weight: bold;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 200px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-decoration: none;
width: 150px;
}

ライトボックスのリンクには画像が含まれています。画像の高さはhtmlで指定されていますが、私のサファリWeb開発ツールによると、ライトボックスリンクは画像の高さを取得しないため、div.entryレイヤーはテキストの高さのみを取得し、画像の高さは取得されません。考慮されていません。

それに対する解決策はありますか？

ありがとう！

4

2 に答える 2

1

divオーバーフローを与える：非表示にして、DIVに幅があることを確認します。

于 2009-06-20T13:49:35.790 に答える
0

あなたの質問は少し不明確ですが、経験から収集すると、左に浮かんでいるDIV内の画像があります。

clearfixと呼ばれる一般的な手法を使用して、外側のDIVがその内側のテキストおよび画像と同じ高さになるようにすることができます。

あなたが言及したサイトを見ると、これを次のように解決できます（「clearfix」クラスを追加したことに注意してください）。

<div class="entry-content clearfix">
<a href="...">
<img class="icoon" width="150" height="147" alt="" src="..."/>
</a>
Sommige verkeersborden krijgen een totaal andere lading als je ze een stukje kantelt.
</div>

clearfix CSSコードと問題を説明する記事は、次の場所にあります。

http://www.positioniseverything.net/easyclearing.html

于 2009-06-20T13:49:23.263 に答える