Question

我正在尝试创建一个新闻框，其中将有一个包含左侧图像的div和一个包含右侧文本行的div。每当我将它们设置为内联块时，文本就会在div图像的正下方停留。我希望他们在一条线上。这是我的代码，你能指出我做错了吗？

编辑：更正了TYPO但仍然......

<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（您应该稍微拉伸结果窗口，让它有足够的宽度来查看您想要的结果）

Answer 2

使用<div id="newsImg">包裹div <div class="metaNews">，div并将display设为flex。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 3

问题是您正在使用using System; namespace Hi { class Program { static void Main(string[] args) { string t1 = "A book was lost. There is a book on the table. Is that the book?"; Console.WriteLine(t1); Console.WriteLine(" - Found {0} articles, should be 2.", CountArticles(t1)); Console.ReadKey(); } static int CountArticles(string text) { int count = 0; { for (int i = 0; i < text.Length; ++i) { if (text[i] == 'a' || text[i] == 'A') { ++count; } } return count; } } } }，如果没有使用宽度，display: inline-block在不使用设置宽度的情况下无效，

所以我添加了以下属性：display: inline-block到width: 50%选择器和#newsImg，

这是jsFiddle

中的一个正在运行的示例

显示：内联块不能与div一起使用

3 个答案: