Verwendung von Inline-Block anstelle von Float für Galerie-Layout

Question

Ich habe eine Galerie mit Bild, Titel und Beschreibung.

Das Bild verwendet float: left;, während der Titel und die Beschreibung rechts davon gestapelt sind.

https://jsfiddle.net/aeuz0n8g/

Ich bin auf der Suche nach einem Weg, display: inline-block; auf dem Bild statt float zu verwenden, aber die Beschreibung wird unter dem Titel nicht stapeln.

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>

Hinweis: Dies ist eine Erklärung, warum ich suche inline-block statt float zu verwenden.

aus einem unbekannten Grund, wenn in Chrome, auf 720p Auflösung meine volle Website verwenden, wird der Titel des Bildes überlappen. Aber nicht in Firefox, IE oder 1080p.

Ich kann nur einen Screenshot zeigen, da es sich um eine lokale Site handelt, die auf meinem Computer entwickelt wird. Der JSFiddle-Link ist jedoch der genaue Code, der verwendet wird. Obwohl ich die Überlappung in JSFiddle nicht replizieren kann.

ich nicht das Problem debuggen können, denn wenn ich Element jede der CSS inspizieren und berühren, setzen die Titel wieder normal, keine Überlappung mehr. Also ich dachte, ich würde versuchen, alternative CSS zu erreichen, das gleiche Layout und sehen, ob es das Problem beseitigt. Ich dachte, es könnte ein Float Rendering Glitch mit Chrom sein.

Answer 1

Wickeln Sie den Titel und den Text in ein neues Element, setzen Sie das auf inline-block und enthalten Sie seine Breite, so dass es in die gleiche Zeile passt.

.info { 
    width: calc(100% - (50px + 1em)); 
    display: inline-block; 
    vertical-align: top; 
} 

Hier ist eine Demo.

.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 { 
 
    display: inline-block; 
 
    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 { 
 
    display: inline-block; 
 
    max-width: 275px; 
 
    font-size: 1.05em; 
 
    font-weight: 700; 
 
    padding: 0.3em 0; 
 
    text-align: left; 
 
    vertical-align: top; 
 
} 
 

 
.description { 
 
    display: inline-block; 
 
    max-width: 275px; 
 
    font-size: .9em; 
 
    line-height: 1.4em; 
 
    text-align: left; 
 
    vertical-align: top; 
 
} 
 

 
/* added this */ 
 
.info { 
 
    width: calc(100% - (50px + 1em)); 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<!-- Item 1 --> 
 
<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="info"> 
 
    <div class="title"> 
 
     <a href="#">Title</a> 
 
    </div> 
 
    <div class="description"> 
 
     Description description description description description description. 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Item 2 --> 
 
<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="info"> 
 
    <div class="title"> 
 
     <a href="#">Title</a> 
 
    </div> 
 
    <div class="description"> 
 
     Description description description description description description. 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Item 3 --> 
 
<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="info"> 
 
    <div class="title"> 
 
     <a href="#">Title</a> 
 
    </div> 
 
    <div class="description"> 
 
     Description description description description description description. 
 
    </div> 
 
    </div> 
 
</div>

Sie auch dies ein Flex-Layout mit dem Standard flex-direction: row zwischen den linken/rechten Abschnitten, und ein flex-direction: column für den Titel/Text machen könnten.

.item-container { 
 
    display: inline-flex; 
 
    width: 300px; 
 
    min-height: 90px; 
 
    margin: 0.2em; 
 
    padding: 0.5em; 
 
    vertical-align: top; 
 
    text-align: left; 
 
    background: white; 
 
} 
 

 
.img-wrapper { 
 
    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 { 
 
    font-size: 1.05em; 
 
    font-weight: 700; 
 
    padding: 0.3em 0; 
 
    text-align: left; 
 
} 
 

 
.description { 
 
    max-width: 275px; 
 
    font-size: .9em; 
 
    line-height: 1.4em; 
 
    text-align: left; 
 
} 
 

 
.info { 
 
    flex-grow: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<!-- Item 1 --> 
 
<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="info"> 
 
    <div class="title"> 
 
     <a href="#">Title</a> 
 
    </div> 
 
    <div class="description"> 
 
     Description description description description description description. 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Item 2 --> 
 
<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="info"> 
 
    <div class="title"> 
 
     <a href="#">Title</a> 
 
    </div> 
 
    <div class="description"> 
 
     Description description description description description description. 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Item 3 --> 
 
<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="info"> 
 
    <div class="title"> 
 
     <a href="#">Title</a> 
 
    </div> 
 
    <div class="description"> 
 
     Description description description description description description. 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Wenn Sie offen sind display: flex zu verwenden Sie den Titel und die Beschreibung in einem div wickeln konnte und dies zu tun.

<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="content-wrapper"> 
    <div class="title"> 
     <a href="#">Title</a> 
    </div> 
    <div class="description"> 
     Description description description description description description. 
    </div> 
    </div> 
</div> 

und dann

.item-container { 
    display: flex; 

    width: 300px; 
    min-height: 90px; 
    margin: 0.2em; 
    padding: 0.5em; 
    vertical-align: top; 
    text-align: left; 
    background: white; 
} 

Optional können Sie display: flex zum content-wrapper Klasse hinzufügen und wie dieser

.content-wrapper { 
    display: flex; 
    flex-direction: column; 
} 

FWIW ich dies mit der Auflösung auf meinem MBP getestet verändert und nichts überlappt für mich.