HTML middle Block Center width adaptive

Source: Internet
Author: User

In fact, this is not a very difficult thing, but, if you have no experience or do not know the HTML original number in the browser display in the order, it may be a problem, do not know how to adjust.

First of all, after determining the width of the left and right sides of the block, and then the width of the middle block adaptive, there is a premise, it must be the middle block last display .

Css:

 1  .left  {  float : left ; : 170px ;  background :  #00f ; }2  .right  {  float : right ; : 170px ;  background :  #0f0 ;} 3  .center  {  background :  #333 ;  margin : 0 170px ;} 

If, the HTML element is described in the order of left, center and right. Then when the right is displayed, there may be a problem. The following may not be the result you want:

<Body><Divclass= "Left">Left</Div><Divclass= "Center">Center</Div><Divclass= "Right">Right</Div></Body>

Because it shows the following effects:

You need to adjust the order of the elements in HTML, first around, then the middle. As follows:

1 <Body>2 <Divclass= "Left">Left</Div>3 <Divclass= "Right">Right</Div>4 <Divclass= "Center">Center</Div>5 </Body>

Very useful tips for adjusting the layout of the page is still very useful!

HTML middle Block Center width adaptive

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.