A problem of not displaying on the same line_html/css

Table of Contents

Reply to discussion (solution)

Home

Web Front-end

HTML Tutorial

A problem of not displaying on the same line_html/css_WEB-ITnose

Jun 24, 2016 pm 12:11 PM

		&lt;hr/&gt;        &lt;p&gt;css定位：relative&lt;/p&gt;        &lt;div class=&quot;positionObj&quot;&gt;        	&lt;div&gt;对象1&lt;/div&gt;        	&lt;div id=&quot;relativePosition&quot;&gt;对象2：相对于自身的相对定位&lt;div class=&quot;absolutePosition&quot;&gt;对象2副：相对于对象2的绝对定位&lt;/div&gt;&lt;/div&gt;        	&lt;div&gt;对象3&lt;/div&gt;        	&lt;div&gt;对象4&lt;/div&gt;        &lt;/div&gt;        &lt;hr/&gt;        &lt;p&gt;css定位：absolute&lt;/p&gt;        &lt;div class=&quot;positionObj&quot;&gt;        	&lt;div&gt;对象A&lt;/div&gt;        	&lt;div class=&quot;absolutePosition&quot;&gt;对象B：相对于body的绝对定位&lt;div class=&quot;absolutePosition&quot;&gt;对象B副：相对于对象B的绝对定位&lt;/div&gt;&lt;/div&gt;        	&lt;div&gt;对象C&lt;/div&gt;        	&lt;div&gt;对象D&lt;/div&gt;        &lt;/div&gt;

Copy after login

            .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;            }

Copy after login

How to set object 2 and object 2 to be displayed on the same line, as well as object B and object B. Both display:inline and float:left are invalid

Reply to discussion (solution)

I write less text in the object box and align it to the same Okay, does this have anything to do with the number of words?

&lt;!DOCTYPE html&gt;&lt;html&gt;	&lt;head&gt;		&lt;title&gt;Test&lt;/title&gt;		&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=gb2312&quot; /&gt;		&lt;style type=&quot;text/css&quot;&gt;&lt;!--			.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;            }		--&gt;&lt;/style&gt;	&lt;/head&gt;	&lt;body&gt;		&lt;hr/&gt;        &lt;p&gt;css定位：relative&lt;/p&gt;        &lt;div class=&quot;positionObj&quot;&gt;            &lt;div&gt;对象1&lt;/div&gt;            &lt;div id=&quot;relativePosition&quot;&gt;对象2：相对于自身的相对定位			&lt;div class=&quot;absolutePosition&quot;&gt;对象2副：相对于对象2的绝对定位&lt;/div&gt;			&lt;/div&gt;            &lt;div&gt;对象3&lt;/div&gt;            &lt;div&gt;对象4&lt;/div&gt;        &lt;/div&gt;        &lt;hr/&gt;        &lt;p&gt;css定位：absolute&lt;/p&gt;        &lt;div class=&quot;positionObj&quot;&gt;            &lt;div&gt;对象A&lt;/div&gt;            &lt;div class=&quot;absolutePosition&quot;&gt;对象B：相对于body的绝对定位&lt;div class=&quot;absolutePosition&quot;&gt;对象B副：相对于对象B的绝对定位&lt;/div&gt;&lt;/div&gt;            &lt;div&gt;对象C&lt;/div&gt;            &lt;div&gt;对象D&lt;/div&gt;        &lt;/div&gt;	&lt;/body&gt;&lt;/html&gt;

Copy after login

Do I have to add top or bottom to put them on the same line? Sorry, I’m a bit over the top.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn