html - 显示:内联 block 不适用于 div

Question

我正在尝试创建一个新闻框，其中左侧有一个包含图像的 div，右侧有一个包含文本行的 div。每当我将它们设置为 inline-block 时，文本就位于 div 图像的正下方并停留在那里。我希望它们排成一行。这是我的代码，你能指出我做错了什么吗？

编辑:更正了打字错误，但仍然...

<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>

还有 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

你打错了:

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

}

inline-blockl 有额外的 l 而不是 ;

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

}

jsfiddle (你应该稍微拉伸(stretch)结果窗口，让它有足够的宽度来看到你想要的结果)