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

Question

如何以精确的尺寸将右边的盒子放在左边的盒子旁边(行内 block )？我可以放上来，但是在不同的浏览器中大小不会一样。那我怎么能把左边的盒子放在没有那个空格的右边的盒子附近呢？谢谢。

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>