locked
CSS Layout RRS feed

  • Question

  • User-165120152 posted

    Hi,

    Please check my code, i want to know why they are not in single line? My needs is explanation instead of alternative solutions.

    <head>
    	<style type="text/css">
    	*{
    		padding: 0;
    		margin:0;
    	}
    	.pone{
    		background-color: red;
    		height: 2rem;
    		width:40%;
    	}
    	.ptwo{
    		background-color: skyblue;
    		height: 2rem;
    		width:60%;
    	}
    	</style>
    </head>
    <body>
    	<p class="pone">xxxx</p>
    	<p class="ptwo">xxxx</p>
    </body>

    Thanks in advance!

    Queen 

    Thursday, August 2, 2018 3:20 PM

All replies

  • User-369506445 posted

    hi

    you have to use <g class="gr_ gr_56 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="56" data-gr-id="56">float ,</g> please try below code :

    DEMO

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
    
        .pone {
            width: 40%;
            background-color: red;
            height: 2rem;
            float: left;
        }
    
        .ptwo {
            background-color: skyblue;
            height: 2rem;
        }
    </style>
    
    
    
    <p class="pone">xxxx</p>
    <p class="ptwo">xxxx</p>

    Thursday, August 2, 2018 3:44 PM
  • User-165120152 posted

    Hi vahid,

    I know the alternative solution like float and flex layout, but I am still curious about why they break new line? But i set the width of elements p, one is 40%, the other is 59%, it will occur in single line. But i check the element style in chrome, without border and other, so this is my doubt. smile

    Good night!

    Queen 

    Friday, August 3, 2018 2:05 AM
  • User1724605321 posted

    Hi QueenYe,

    The <p> tag is meant to represent a paragraph which is a block of text, thus the display mode is block.  You can use display:inline  to enable block-level elements to sit adjacent to one another . But if you don't want the text to start on a new line,  i would suggest not to use <p> tag.  <span> might be a better solution .

    Best Regards,

    Nan Yu

    Tuesday, August 7, 2018 2:20 AM
  • User-165120152 posted

    Hi Nan, 

    I know the substitute solutions, also I know could make them side by side when use display:inline, you should know we can not set the width of the line element, else my goal is want to know why it break line instead of replace solutions. Still wait solution. 

    Why? 

    Queen 

    Wednesday, August 8, 2018 2:51 AM
  • User-369506445 posted

    did you try my <g class="gr_ gr_13 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="13" data-gr-id="13">code ?</g>

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
    
        .pone {
            width: 40%;
            background-color: red;
            height: 2rem;
            float: left;
        }
    
        .ptwo {
            background-color: skyblue;
            height: 2rem;
        }
    </style>
    
    
    
    <p class="pone">xxxx</p>
    <p class="ptwo">xxxx</p>

    Wednesday, August 8, 2018 5:19 AM
  • User-165120152 posted

    Hi vahid,

    Sure, I have try your code, but if you checked the description of my needs, my requirement is want to know why instead of the repalce solutions!!!

    Still waiting explanation!

    Queen 

    Friday, August 10, 2018 3:50 AM
  • User-474980206 posted

    <p> are display:block elements. unless a float or positioning command is not used, a block element takes a whole line, no matter the length. the alignment will control whether is left, right or center aligned in the line.

    by contrast display:inline-block does not take a whole line if the width is under the containers width.

    Friday, August 10, 2018 3:44 PM
  • User-165120152 posted

    Hi bruce,

    My doubt is why two block elements(after set the display:inline-block) can not in single line when set the width of element one is 40%, the other is 60%?

    The sum of width is 100%, the sum width is under the container width, why? 

    Queen 

    Sunday, August 12, 2018 9:22 AM
  • User1724605321 posted

    Hi QueenYe,

    There is white space exists between inline-block elements , so that it can't fit the width to make in same line . You can remove the white space between inline-block elements by adding font-size:0px; 

            body {
                font-size:0;
    
            }

    Then setting font size in child elements :

      .pone {
                width: 40%;
                background-color: red;
                height: 2rem;
                display: inline-block;
               font-size:10px;
            }
    
            .ptwo {
                display: inline-block;
                background-color: skyblue;
                height: 2rem;
                width: 60%;
                font-size:10px;
            }

    Best Regards,

    Nan Yu

    Wednesday, September 5, 2018 7:13 AM
  • User753101303 posted

    Hi,

    Seems you are looking originally for https://www.w3schools.com/htmL/html_blocks.asp

    It is just that block elements are expected to start at a new line. This is why just changing the width is not enough and you have to do additional changes.

    Wednesday, September 5, 2018 7:28 AM