Heim > Artikel > Web-Frontend > 一个不在同一行显示的问题_html/css_WEB-ITnose
一个不在同一行显示的问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:391026Durchsuche
<hr/> <p>css定位：relative</p> <div class="positionObj"> <div>对象1</div> <div id="relativePosition">对象2：相对于自身的相对定位<div class="absolutePosition">对象2副：相对于对象2的绝对定位</div></div> <div>对象3</div> <div>对象4</div> </div> <hr/> <p>css定位：absolute</p> <div class="positionObj"> <div>对象A</div> <div class="absolutePosition">对象B：相对于body的绝对定位<div class="absolutePosition">对象B副：相对于对象B的绝对定位</div></div> <div>对象C</div> <div>对象D</div> </div>
.positionObj { height: 120px; } .positionObj div { font-size:10pt; background-color:gray; width: 100px; height: 50px; float: left; margin-right: 10px; } #relativePosition { position: relative; top:60px; left:50px; } .absolutePosition { position: absolute; left: 400px; display: inline; } 对象2和对象2副怎么设置成同一行显示，对象B和对象B副也是。display:inline和float:left均无效
回复讨论(解决方案)
我把对象盒子里的文字少写点就对齐在同一行了，这和文字多少有关系吗
<!DOCTYPE html><html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <style type="text/css"><!-- .positionObj { height: 120px; } .positionObj div { font-size:10pt; background-color:gray; width: 100px; height: 50px; float: left; margin-right: 10px; } #relativePosition { position: relative; top:60px; left:50px; } .absolutePosition { position: absolute; left: 400px; top:0; } --></style> </head> <body> <hr/> <p>css定位：relative</p> <div class="positionObj"> <div>对象1</div> <div id="relativePosition">对象2：相对于自身的相对定位 <div class="absolutePosition">对象2副：相对于对象2的绝对定位</div> </div> <div>对象3</div> <div>对象4</div> </div> <hr/> <p>css定位：absolute</p> <div class="positionObj"> <div>对象A</div> <div class="absolutePosition">对象B：相对于body的绝对定位<div class="absolutePosition">对象B副：相对于对象B的绝对定位</div></div> <div>对象C</div> <div>对象D</div> </div> </body></html> 非得加个top或bottom才能在同一行吗 不好意思 我比较钻牛角尖
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：请问下列代码是什么意思？这两段代码作用是一样的吗？_html/css_WEB-ITnoseNächster Artikel：求助border-radius问题_html/css_WEB-ITnose