Affichage: inline-block ne fonctionne pas avec divs

Question

J'essaie de créer une boîte de nouvelles où il y aura une div contenant une image sur la gauche et une div contenant des lignes de texte sur la droite. Chaque fois que je les mets en ligne, le texte passe juste sous l'image div et reste là. Je veux qu'ils soient dans une seule ligne. Voici mon code, pouvez-vous indiquer ce que je fais mal?

EDIT: Correction du TYPO, mais encore ...

<div id="newsBox"> 

             <div id="newsImg"> 
              <img src="images/news1.jpg" alt="news1"> 
             </div> 

             <div class="metaNews"> 
              <div id="newsTitle"> 
               <h3>Text Text Text Text Text Text Text Text .</h3> 
              </div> 

              <div class="newsBrief"> 
               <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> 
              </div> 
             </div> 
             <div style="clear:both"></div> 

             <div class="newsBy"> 
              <span class="metaDate">Posted on 10/5/2017</span> 
              <span class="metaBy">By Li</span> 
             </div> 

             <div class="newsLink"> 
              <a href="news1.html">View &rarr;</a> 
             </div> 
             <div style="clear:both"></div> 

           </div> 

Et le CSS:

#newsBox { 
    width: 85%; 
    margin: 0.5rem auto; 
    padding: 0.5rem; 
    border: #333 solid 1px; 
    background-color: #c2c2c2; 
} 

#newsImg { 
    display:inline-block; 


} 
#newsImg > img{ 
    max-width: 120px; 
    max-height: 120px; 
    padding-right:20px; 
    vertical-align: middle; 
} 
.metaNews{ 
    text-align:center; 
    display:inline-block; 

} 
#newsTitle { 

} 
.newsBy { 
    display:inline-block; 
} 
.newsLink { 
    float:right; 
    width: 6rem; 
    text-align: center; 
    background-color: #2F4F4F; 
} 
.newsLink a{ 
    font-family: 'Play', sans-serif; 
    color: #fff; 
    text-decoration: none; 

}

Answer 1

Vous avez une faute de frappe dans:

.metaNews{ 
    text-align:center; 
    display:inline-blockl 

} 

inline-blockl ha s l supplémentaire au lieu d'un ;

.metaNews{ 
    text-align:center; 
    display:inline-block; 

} 

jsfiddle (vous devez étirer la fenêtre de résultat un peu pour laisser assez de largeur pour voir les résultats que vous voulez)

Answer 2

Enroulez le divs <div id="newsImg">, <div class="metaNews"> en utilisant un div et définissez display sur flex.

#newsBox { 
 
    width: 85%; 
 
    margin: 0.5rem auto; 
 
    padding: 0.5rem; 
 
    border: #333 solid 1px; 
 
    background-color: #c2c2c2; 
 
} 
 

 
#newsImgWrapper { 
 
    display: flex; 
 
} 
 

 
#newsImg { 
 
    display: inline-block; 
 
} 
 

 
#newsImg>img { 
 
    max-width: 120px; 
 
    max-height: 120px; 
 
    padding-right: 20px; 
 
    vertical-align: middle; 
 
} 
 

 
.metaNews { 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
#newsTitle h3{ margin:0;} 
 

 
.newsBy { 
 
    display: inline-block; 
 
} 
 

 
.newsLink { 
 
    float: right; 
 
    width: 6rem; 
 
    text-align: center; 
 
    background-color: #2F4F4F; 
 
} 
 

 
.newsLink a { 
 
    font-family: 'Play', sans-serif; 
 
    color: #fff; 
 
    text-decoration: none; 
 
}

<div id="newsBox"> 
 
    <div id="newsImgWrapper"> 
 
    <div id="newsImg"> 
 
     <img src="images/news1.jpg" alt="news1"> 
 
    </div> 
 

 
    <div class="metaNews"> 
 
     <div id="newsTitle"> 
 
     <h3>Text Text Text Text Text Text Text Text .</h3> 
 
     </div> 
 

 
     <div class="newsBrief"> 
 
     <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div style="clear:both"></div> 
 

 
    <div class="newsBy"> 
 
    <span class="metaDate">Posted on 10/5/2017</span> 
 
    <span class="metaBy">By Li</span> 
 
    </div> 
 

 
    <div class="newsLink"> 
 
    <a href="news1.html">View &rarr;</a> 
 
    </div> 
 
    <div style="clear:both"></div> 
 

 
</div>

Answer 3

Le problème est que vous utilisez display: inline-block, Sans largeur d'utilisation, display: inline-block ne fonctionne pas sans utiliser la largeur de réglage,

J'ajouté ces propriétés: width: 50% à #newsImg sélecteur et à .metaNews,

Voici un exemple courant dans jsFiddle