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

概述如何将右侧框放在左侧框(内联块)旁边,并且尺寸精确？我可以把它,但不同浏览器的大小不一样.那么如果没有那个空格,我怎么能把左框放在右边的盒子附近呢？谢谢. div { border: 1px solid green;}.entry { width: 560px; margin: auto; border: 1px solid red; display: 如何将右侧框放在左侧框(内联块)旁边,并且尺寸精确？我可以把它,但不同浏览器的大小不一样.那么如果没有那个空格,我怎么能把左框放在右边的盒子附近呢？谢谢.

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 >    <div >        <img src="http://bit.ly/1RabLNk"/>    </div>    <div >        <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

以下是问题的示例：

解决方法 您的答案非常接近您的需求.

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

如果您尝试使用内联块,则由于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 >  <div >    <img src="http://bit.ly/1RabLNk" />  </div>  <div >    <p>Lorem ipsum dolor sit amet,lacus diam convallis.</p>  </div></div>

总结

以上是内存溢出为你收集整理的Html标记动态扩展到另一个div旁边的父级全部内容，希望文章能够帮你解决Html标记动态扩展到另一个div旁边的父级所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。