0
私はイメージ、タイトル、および説明付きのギャラリーを持っています。Gallery LayoutのFloatの代わりにInline-Blockを使用する
画像にはfloat: left;が使用され、タイトルと説明は右側に重なります。
https://jsfiddle.net/aeuz0n8g/
私の代わりにfloatの画像にdisplay: inline-block;を使用する方法を探していますが、説明はタイトルの下にスタックしないでしょう。
https://jsfiddle.net/5jbswg39/
.item-container {
display: inline-block;
width: 300px;
min-height: 90px;
margin: 0.2em;
padding: 0.5em;
vertical-align: top;
text-align: left;
background: white;
}
.img-wrapper {
float: left;
max-width: 50px;
max-height: 60px;
height: 60px;
margin: 0.6em 1em 0 0;
text-align: center;
background: gray;
}
.img-wrapper img {
width: auto;
max-width: 50px;
max-height: 50px;
vertical-align: top;
}
.title {
max-width: 275px;
font-size: 1.05em;
font-weight: 700;
padding: 0.3em 0;
text-align: left;
vertical-align: top;
}
.description {
max-width: 275px;
font-size: .9em;
line-height: 1.4em;
text-align: left;
vertical-align: top;
}<div class="item-container">
<div class="img-wrapper">
<a href="#">
<img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
</a>
</div>
<div class="title">
<a href="#">Title</a>
</div>
<div class="description">
Description description description description description description.
</div>
</div>注：これは私が代わりにfloatのinline-blockを使用しているよ理由の説明です。
不明な理由でクロームで私の完全なサイトを使用した場合、720pの解像度に、タイトル画像を重なります。しかしFirefox、IE、1080pではそうではありません。
私はスクリーンショットを表示することができます。スクリーンショットは、自分のコンピュータで開発中のローカルサイトだからです。しかし、JSFiddleリンクは、使用されている正確なコードです。 JSFiddleのオーバーラップは複製できません。
私は要素を検査し、CSSの任意のをタッチすると、タイトルが、正常に戻ってリセットもはや重なっているので、私は、問題をデバッグすることはできません。だから私は同じレイアウトを達成し、それが問題を取り除くかどうかを見るために代替のCSSを試すことを考えました。私はそれがクロムを使ったフロートレンダリンググリッチかもしれないと思った。
ありがとう、私はギャラリーの複数の部門にこれを適用する必要があります、私はあなたに連絡します。 –
これは重複した問題を解決し解決しました。私はインラインブロックでcalcを使った。 –