一个不在同一行显示的问题_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

回复讨论(解决方案)

집

웹 프론트엔드

HTML 튜토리얼

一个不在同一行显示的问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:11 PM

		<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才能在同一行吗不好意思我比较钻牛角尖

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.