一个不在同一行显示的问题_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-24 12:11:39

原创

1205人浏览过

		<hr/>        <p>css定位：relative</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/5553">
                            <img src="https://img.php.cn/upload/webcode/000/000/000/5b6944e59d1d6457.jpg" alt="5.3.3LOGA日志系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/5553">5.3.3LOGA日志系统</a>
                            <p>LOGA日志系统即名为"Log AsThis"，是如斯开发的日志系统，取简洁，追求效率之意，本日志系统基于PHP+MySQL平台开发，结构简洁，运行速度极快。

LOGA日志系统 5.3.3 更新日志：2018-07-30
[优化]优化后台SESSION；
[修复]修复同一域名不同目录安装多个程序潜在问题；
[增强]搜索支持extra选项；
[更改]群组名，控制器名</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="5.3.3LOGA日志系统">
                                <span>150</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/5553" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="5.3.3LOGA日志系统">
                        </a>
                    </div>
                        <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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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才能在同一行吗不好意思我比较钻牛角尖