Implementation of typical layout--section 1

来源：互联网发布：软启动器编程编辑：程序博客网时间：2024/05/18 01:59

Scenario

A typical scenario in web page is that the left part display the heading of the content as navigation, and the right part display content, which could adjust the with the window width. We could see a lot of development docs apply such layout for its simplicity and beauty.

Implementation

<header></header><aside></aside><main></main><footer></footer><style>    header {        height: 200px;        background: red;    }    aside {        float: left;        width: 300px;        height: 300px;        background: green;    }    main {        margin-left: 300px;        height: 300px;        background: black;    }    footer {        height: 200px;        background: blue;    }</style>

Result

As you change the window’s width, the main content will adjust it’s width to fit the window, but the aside block remains unchanged. The main content on the right is pretty smart.

How

Basically, browser will set a block element(div or main or aside) extend to it’s parent’s width, but it’s not inherit from parent element. This is one of the default rendering. As you add a header or footer or div, it’s set to the width as it’s parent by default. So that’s why the main content could change as to window’s width. The second point is, set the margin-left of the main element for aside so that when the aside is float it could just fit in the left margin. On the other hand, You can not make the main element float to right, because float property take the element out of normal flow then it’s width become zero and it has already change to next line. We could use flow in the circumstance that we know the width it exactly is.

More solutions

Another way to implement the layout is to make the aside position: absolute, and then move it to the right position of the main’s left side where it set the margin left for the aside. At root, the idea is the same to float, since they both take the aside out of the document flow and place it right at the margin of the main. Below is the implementation code.

<body>    <header>    </header>    <aside>    </aside>    <main>    </main>    <footer>    </footer>    <style>        body {            margin: 0;        }        header {            height: 200px;            background: blue;        }        aside {            position: absolute;            top: 200px;            left: 0;            width: 300px;            height: 300px;            background: red;        }        main {            margin-left: 300px;            height: 300px;            background: yellow;        }        footer {            height: 200px;            background: silver;        }    </style></body>

阅读全文

0 0