Html <p> 标记动态扩展到另一个 div 旁边的父级

Question

如何以精确的尺寸将右框放在左框（内联块）旁边？我可以放上去，但是不同浏览器的大小会不一样。那我怎么能把左边的盒子放在右边的盒子附近没有那个空白呢？谢谢。

div {
    border: 1px solid green;
}
.entry {
    width: 560px;
    margin: auto;
    border: 1px solid red;
    display: block;
    position: relative; 
}
.entry .img-cont,.body-cont {
    vertical-align: top;
}
.entry .img-cont {
    width: 50px;
    display: inline-block;
}
.entry .body-cont {
    width: 508px;
    display: inline-block;
}
.entry .body-cont p {
    display: table;
}

<div class="entry">
    <div class="img-cont">
        <img src="http://bit.ly/1RabLNk"/>
    </div>
    <div class="body-cont">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla libero, sollicitudin a erat semper, gravida pharetra augue. Phasellus convallis ultrices dolor vitae imperdiet. Curabitur mollis odio neque, in dictum nisi finibus nec. Vivamus pulvinar, turpis a volutpat semper, lacus diam convallis.</p>
    </div>
</div>

看到这个 http://jsfiddle.net/leandroparrar/6omjqefj

以下是问题的示例：

Answer 1

您的答案非常接近您的需要。

如果您将.body-cont 中p 元素的边距归零，则会消除出现在段落顶部的额外空白。

如果您尝试使用inline-block，由于 HTML 文件中的回车（换行符），很容易在元素之间获得一些额外的空格。

如果您在.img-cont 和.body-cont 上使用display: table-cell，则 两个元素将并排放置，您可以根据需要使用左右填充来控制水平间距。

div {
  border: 1px solid green;
}
.entry {
  width: 560px;
  margin: auto;
  border: 1px solid red;
  display: table;
}
.entry .img-cont, .entry .body-cont {
  display: table-cell;
  vertical-align: top;
}
.entry .img-cont img {
  display: block;
}
.entry .body-cont p {
  margin: 0;
}

<div class="entry">
  <div class="img-cont">
    <img src="http://bit.ly/1RabLNk" />
  </div>
  <div class="body-cont">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla libero, sollicitudin a erat semper, gravida pharetra augue. Phasellus convallis ultrices dolor vitae imperdiet. Curabitur mollis odio neque, in dictum nisi finibus nec. Vivamus pulvinar,
      turpis a volutpat semper, lacus diam convallis.</p>
  </div>
</div>