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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

以下是问题的示例：

Answer 1

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

如果你将p中.body-cont元素的边距置零，那将消除段落顶部出现的额外空格。

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

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

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>