Pourquoi le texte est-il enfoncé après un flottement: bloc de gauche?

Question

J'ai une structure d'une image qui est flottante vers la gauche et un autre bloc qui devrait le suivre horizontalement vers la droite. C'est le cas, sauf quand la longueur du texte de ce bloc devient plus grande. Ensuite, les choses deviennent salissantes.

Voilà ma structure:

post-big-then-small-2-smaller { 
 
    height: 100%; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    margin-top: 24px; 
 
    padding-bottom: 12px; 
 
    border-bottom: 1px solid #e5e5e5; 
 
} 
 
    
 
.post-big-then-small-2-smaller .post-thumbnail img { 
 
    height: 90px; 
 
    width: 40%; 
 
    object-fit: cover; 
 
    position: relative; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 
    
 
    .post-big-then-small-2-smaller .entry-header .entry-title { 
 
    margin: 0 0 6px 0; 
 
} 
 

 
.post-big-then-small-2-smaller .entry-header .entry-title a { 
 
    white-space: nowrap; 
 
    color: #1e1e1e; 
 
    font-family: 'Playfair Display', serif; 
 
    font-size: 20px; 
 
} 
 
    
 
.post-big-then-small-2-smaller .entry-header .entry-meta .entry-date-published { 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
    font-size: 10px; 
 
    font-family: Montserrat, sans-serif; 
 
    font-weight: 600; 
 
    color: #3a3a3a; 
 
    opacity: 0.5; 
 
}

<article class="post-big-then-small-2-smaller"> 
 
     <div class="post-thumbnail"> 
 
      <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/> 
 
     </div> 
 
     <header class="entry-header"> 
 
      <div class="entry-meta"> 
 
       <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3> 
 
       <a href="http://www.google.com" rel="bookmark"> 
 
        <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time> 
 
       </a> 
 
     </header> 
 
    </article>

ce que je vis:

Toutes les idées pourquoi?

Answer 1

Évitez d'appliquer le style CSS aux éléments enfants. Appliquez plutôt le style CSS à .post-thumbnail & .entry-header. Retirez également white-space: nowrap du titre (il n'a pas d'utilité).

Dans votre cas appliquer des propriétés CSS (float, hauteur, etc.) à .post-thumbnail au lieu de .post-thumbnail img

Exemple:

.post-big-then-small-2-smaller .post-thumbnail { 
    width: 40%; 
    float: left; 
    margin-right: 10px; 
} 

Jetez un oeil à l'extrait ci-dessous:

.post-big-then-small-2-smaller { 
 
    height: 100%; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    margin-top: 24px; 
 
    padding-bottom: 12px; 
 
    border-bottom: 1px solid #e5e5e5; 
 
} 
 

 
.post-big-then-small-2-smaller .post-thumbnail { 
 
    width: 40%; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
.post-big-then-small-2-smaller .post-thumbnail img { 
 
    width: 100%; 
 
    height: 90px; 
 
    object-fit: cover; 
 
    position: relative; 
 
} 
 

 
.post-big-then-small-2-smaller .entry-header .entry-title { 
 
    margin: 0 0 6px 0; 
 
} 
 
.post-big-then-small-2-smaller .entry-header .entry-title a { 
 
    color: #1e1e1e; 
 
    font-family: 'Playfair Display', serif; 
 
    font-size: 20px; 
 
} 
 

 
.post-big-then-small-2-smaller .entry-header .entry-meta .entry-date-published { 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
    font-size: 10px; 
 
    font-family: Montserrat, sans-serif; 
 
    font-weight: 600; 
 
    color: #3a3a3a; 
 
    opacity: 0.5; 
 
}

<article class="post-big-then-small-2-smaller"> 
 
     <div class="post-thumbnail"> 
 
      <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/> 
 
     </div> 
 
     <header class="entry-header"> 
 
      <div class="entry-meta"> 
 
       <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus</a></h3> 
 
       <a href="http://www.google.com" rel="bookmark"> 
 
        <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time> 
 
       </a> 
 
     </header> 
 
    </article>

Hope this helps!

Answer 2

Le display property spécifie le type de boîte utilisé pour un élément HTML. pour votre cas, vous pouvez utiliser l'affichage: inline-block:

.post-thumbnail { 
width: 50%; 
display: inline-block; 
float: left; 
} 
header.entry-header { 
width: 50%; 
float: right; 
text-align: left; 
} 

Affiche un élément comme un conteneur de niveau bloc en ligne. L'intérieur de ce bloc est formaté en boîte au niveau du bloc, et l'élément lui-même est formaté comme une boîte en-ligne

vous définissez où l'élément à l'intérieur vous voulez flotter:

post-big-then-small-2-smaller { 
 
     height: 100%; 
 
     overflow: hidden; 
 
     width: 100%; 
 
     margin-top: 24px; 
 
     padding-bottom: 12px; 
 
     border-bottom: 1px solid #e5e5e5; 
 
    } 
 
    
 
.post-big-then-small-2-smaller .post-thumbnail img { 
 
    height: 90px; 
 
    width: 40%; 
 
    object-fit: cover; 
 
    float: right; 
 
    position: relative; 
 
    margin-right: 10px; 
 
} 
 
    
 
    .post-big-then-small-2-smaller .entry-header .entry-title { 
 
     margin: 0 0 6px 0; 
 
    } 
 
    .post-big-then-small-2-smaller .entry-header .entry-title a { 
 
     white-space: nowrap; 
 
     color: #1e1e1e; 
 
     font-family: 'Playfair Display', serif; 
 
     font-size: 20px; 
 
    } 
 
    
 
    .post-big-then-small-2-smaller .entry-header .entry-meta .entry-date-published { 
 
     text-transform: uppercase; 
 
     letter-spacing: 3px; 
 
     font-size: 10px; 
 
     font-family: Montserrat, sans-serif; 
 
     font-weight: 600; 
 
     color: #3a3a3a; 
 
     opacity: 0.5; 
 
    } 
 
article.post-big-then-small-2-smaller { 
 
    display: inline-block; 
 
    max-width: fit-content; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.post-thumbnail { 
 
    width: 50%; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
header.entry-header { 
 
    width: 50%; 
 
    float: right; 
 
    text-align: left; 
 
} 
 
.text{width:100%;display:inline-block;max-width:75%;margin:auto}

<article class="post-big-then-small-2-smaller"> 
 
        <div class="post-thumbnail"> 
 
         <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/> 
 
        </div> 
 
        <header class="entry-header"> 
 
         <div class="entry-meta"> 
 
          <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3> 
 
          <a href="http://www.google.com" rel="bookmark"> 
 
           <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time> 
 
          </a> 
 
       </div> 
 
</header> 
 
<div class="text"><p>text text text texttext texttext texttext texttext texttext texttext texttext texttext text</p></div> 
 
    </article> 
 
<article class="post-big-then-small-2-smaller"> 
 
        <div class="post-thumbnail"> 
 
         <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/> 
 
        </div> 
 
        <header class="entry-header"> 
 
         <div class="entry-meta"> 
 
          <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3> 
 
          <a href="http://www.google.com" rel="bookmark"> 
 
           <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time> 
 
          </a> 
 
       </div> 
 
</header> 
 
<div class="text"><p>text text text texttext texttext texttext texttext texttext texttext texttext texttext text</p></div> 
 
    </article> 
 
<article class="post-big-then-small-2-smaller"> 
 
        <div class="post-thumbnail"> 
 
         <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/> 
 
        </div> 
 
        <header class="entry-header"> 
 
         <div class="entry-meta"> 
 
          <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3> 
 
          <a href="http://www.google.com" rel="bookmark"> 
 
           <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time> 
 
          </a> 
 
       </div> 
 
</header> 
 
<div class="text"><p>text text text texttext texttext texttext texttext texttext texttext texttext texttext text</p></div> 
 
    </article>