Talk about css3 layout_html/css_WEB-ITnose-HTML Tutorial-php.cn

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        div {            width: 20em;            float: left;        }        #div1 {            margin-right: 2em;        }        #div3 {            width: 100%;            background-color: yellow;            height: 200px;        }    </style></head><body>    <div id="div1">        <p>                        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        </p>    </div>    <div id="div2">        <p>            示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        </p>    </div>    <div id="div3">        页面中其它内容    </div></body></html>

Copy after login

Using the above code the page is displayed as follows:

But when something different is added to any element in div1 and div2 in the above example, such as adding an image

then it will be displayed The page effect will be as follows, (that is to say, the query alignment of two elements cannot be realized)

So how to solve this problem

in css3 Add multi-column layout. Using multi-column layout, you can divide the content in an element into multiple columns for display, and ensure that the bottom of the content in each column is aligned. You can mainly use the following attributes

column-count: the number of columns to be displayed

column-width: the width of the current column display

column-gap: between multiple columns Spacing distance

column-rule: Add a spacing line between columns and set the width, color, etc. of the spacing line

General box layout

General The page layout is divided into left, middle and right, like the following example

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        #left-sidebar {            float: left;            width: 200px;            padding: 20px;            background-color: orange;        }        #contents {            float: left;            width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            float: left;            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }    </style></head><body>    <div id="container">        <div id="left-sidebar">            <h2>左侧边栏</h2>            <ul>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>            </ul>        </div>        <div id="contents">            <h2>内容</h2>            <p>                示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。            </p>        </div>        <div id="right-sidebar">            <h2>右侧边栏</h2>            <ul>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>            </ul>        </div>    </div></body></html>

Copy after login

The interface effect after running the code is as follows:

You can see that using the float attribute or position attribute, the bottom of the div elements on the left and right sides or in multiple columns is not aligned

Use box layout

Use box below Layout method to align the bottom, change the above css to the following:

        #container {            display:-moz-box;            display:-webkit-box;        }        #left-sidebar {                      width: 200px;            padding: 20px;            background-color: orange;        }        #contents {                       width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

Copy after login

In fact, display:box is used on the outermost div, and After removing the float:left attribute of the three divs inside, the interface operation rendering is as follows:

By the way, here is the difference between using a box and a multi-column layout: 1. The width of each column in multi-column layout must be equal. 2. It is impossible to specify which column displays what content using multi-column layout. This means that multi-column layout is suitable for displaying article content but not suitable for arranging various elements of the entire web page. Structure

Flexible box layout using adaptive window

For the above example, if we want the total width of these three divs to be equal to the width of the browser window, that is, as the browser What should be done if the width of the browser window changes?

In fact, it is very simple. Just add the attribute -webkit-box-flex:1;-moz-box-flex:1; to the middle div. That’s it, the css code is as follows:

        #container {          display:-moz-box;          display:-webkit-box;        }        #left-sidebar {                      width: 200px;            padding: 20px;            background-color: orange;        }        #contents {                -webkit-box-flex:1;            -moz-box-flex:1;                   width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

Copy after login

The interface operation effect is as shown:

Change the display of elements Order

So how do we change the display order of elements? For example, if I want the left column to be displayed on the far right and the content column to be displayed on the left, what should I do?

CSS3 provides an attribute box-ordinal-group attribute to change the display order of each element. If you look at my css, I just add box-ordinal-group to each div in it, and the change is easy. Change their display order

        #container {            display: -moz-box;            display: -webkit-box;        }        #left-sidebar {            -moz-box-ordinal-group: 3;            -webkit-box-ordinal-group: 3;            width: 200px;            padding: 20px;            background-color: orange;        }        #contents {            -moz-box-ordinal-group: 1;            -webkit-box-ordinal-group: 1;            -webkit-box-flex: 1;            -moz-box-flex: 1;            width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            -moz-box-ordinal-group: 2;            -webkit-box-ordinal-group: 2;            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

Copy after login

The interface rendering is as follows (isn’t it amazing):

Change the arrangement of elements Direction

If you want to change the arrangement direction of elements, you can use box-orient in CSS3 to specify the arrangement direction of multiple elements. Just add the box-orient attribute to the outermost div. The css code is as follows:

        #container {            display: -moz-box;            display: -webkit-box;            -moz-box-orient:vertical;            -webkit-box-orient:vertical;        }        #left-sidebar {            -moz-box-ordinal-group: 3;            -webkit-box-ordinal-group: 3;            width: 200px;            padding: 20px;            background-color: orange;        }        #contents {            -moz-box-ordinal-group: 1;            -webkit-box-ordinal-group: 1;            -webkit-box-flex: 1;            -moz-box-flex: 1;            width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            -moz-box-ordinal-group: 2;            -webkit-box-ordinal-group: 2;            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

Copy after login

The interface completely changed immediately

Adaptive element width and height

When using box layout, the width and height of elements are adaptive, which means that the width and height of elements can change according to the change of arrangement direction

Look at the example below, the entire html interface code is as follows As shown:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: horizontal;            -webkit-box-orient: horizontal;            width: 500px;            height: 300px;        }        #text-a {            background-color: orange;        }        #text-b {            background-color: yellow;        }        #text-c {            background-color: limegreen;        }        #text-a, #text-b, #text-c {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }    </style></head><body>    <div id="container">        <div id="text-a">示例文字A</div>        <div id="text-b">示例文字B</div>        <div id="text-c">示例文字C</div>    </div></body></html>

Copy after login

The interface effect is as follows:

When we change the above code in the container The css is as follows (that is, changing the arrangement to vertical direction):

        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: vertical;            -webkit-box-orient: vertical;            width: 500px;            height: 300px;        }

Copy after login

Then the interface rendering is as follows:

Use flex box layout to eliminate blank space

After looking at the above renderings, you must be thinking that there is always a large blank area left in the container. How should we eliminate it? In fact, it can be solved using the flexible box layout in CSS3, that is, the total width and total height of multiple elements participating in the arrangement are always equal to the width and height of the container

Let’s modify the above code (arrange the Set the direction to horizontal and add the box-flex attribute to the middle sub-div)

The css style is as follows:

        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: horizontal;            -webkit-box-orient: horizontal;            width: 500px;            height: 300px;        }        #text-a {            background-color: orange;        }        #text-b {            background-color: yellow;            -moz-box-flex:1;            -webkit-box-flex:1;        }        #text-c {            background-color: limegreen;        }        #text-a, #text-b, #text-c {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

Copy after login

The interface display effect is as follows

Of course you can also set the arrangement direction to vertical, then the interface will naturally appear as follows

Use for multiple elements box-flex attribute

Now we not only add box-flex to the middle child div, but also add box-flex to the first child div, what will be the result?

        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: vertical;            -webkit-box-orient: vertical;            width: 500px;            height: 300px;        }        #text-a {            background-color: orange;            -moz-box-flex: 1;            -webkit-box-flex: 1;        }        #text-b {            background-color: yellow;            -moz-box-flex: 1;            -webkit-box-flex: 1;        }        #text-c {            background-color: limegreen;        }        #text-a, #text-b, #text-c {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

Copy after login

如果三个子div都加上box-flex属性，那么每个div高度等于容器的高度除以3，也就是效果图所示所示：

其实box-flex:1就是让其占据刚刚好的宽度，也就是说除去其它的部分，它刚好占满全部

你动手去尝试一下用box-flex:2，会发现box-flex:2并非box-flex:1的两倍就是这个道理，1只是代表单位像素，也就是刚刚好的宽高，并非代表数值

指定水平方向与垂直方向的对齐方式

在css2中，如果想方案水平居中就只能用text-align:center，但是却不能让文字垂直居中，在css3中，只要让div元素使用box-align属性就行了。

示例代码

        div {            display: -moz-box;            display: -webkit-box;            -moz-box-align: center;            -webkit-box-align: center;            -moz-box-pack: center;            -webkit-box-pack: center;            width: 200px;            height: 100px;            background-color: pink;        }

Copy after login

如果在div容器中放入“示例文字”这几个字，界面运行效果就会如下所示：（同样，如果我们在div里面放入图像也是可以实现水平和垂直方向居中的）

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7337

Java Tutorial

1627

CakePHP Tutorial

1352

Laravel Tutorial

1265

PHP Tutorial

1209

Related knowledge

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

See all articles