Das CSS-Layout ist zentriert und ausgerichtet, die linke Seite hat eine feste Breite und die rechte Seite ist adaptiv. Detaillierte Einführung

    CSS页面布局是web前端开发的最基本的技能，本文将介绍一些常见的布局方法，涉及到盒子布局，column布局，flex布局等内容。本文中，你可以看到一些水平垂直居中的方法，左侧固定宽度，右侧自适应的一些方法。如果你有更多关于布局方面的技巧，欢迎留言交流。一、神奇的居中    经常看到有一些面试题问如何实现水平垂直居中，还要求用多种方法。唉唉唉！下面介绍一下我所知道的实现居中的方法。（1）父元素relative;子元素absolute，top:50%;left:50%;margin-left:-自己宽度的一半;margin-right:-自己高度的一半。

nbsp;html>


    <meta>
    <title>水平垂直居中2</title>
    <style>
        .container{
            width: 100%;
            height: 500px;
            background: red;
            position: relative;
        }
        .child{
            width: 300px;
            height: 300px;
            background: blue;
            position: absolute;
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -150px;
        }
    </style>


    <div>
        <div></div>
    </div>

Diese Methode erfordert die Kenntnis der Breite und Höhe der untergeordneten Elemente.

（2）父元素：relative;子元素：absolute;top：50%;left:50%;transform:translate(-50%,-50%);

nbsp;html>


    <meta>
    <title>水平垂直居中3</title>
    <style>
        .container{
            background: red;
            width: 100%;
            height: 500px;
            position: relative;
        }
        .child{
            background: blue;
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>


    <div>
        <div></div>
    </div>

<span style="font-size: 14px; font-family: Microsoft YaHei">此法跟上面的相似，但是用到了transform，好处是不需要知道子元素的宽高,兼容性方面我查了一下，看着办吧。<br><img src="https://img.php.cn/upload/article/000/000/013/e6f851faee59ab9abba51c883c21e708-0.png" alt="Das CSS-Layout ist zentriert und ausgerichtet, die linke Seite hat eine feste Breite und die rechte Seite ist adaptiv. Detaillierte Einführung"    style="max-width:90%"  style="max-width:90%" title="Das CSS-Layout ist zentriert und ausgerichtet, die linke Seite hat eine feste Breite und die rechte Seite ist adaptiv. Detaillierte Einführung"><br><strong>（3）父元素：<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: flex;justify-content: center;align-items: center;</strong></span>

nbsp;html>


    <meta>
    <title>水平垂直居中1</title>
    <style>
        .container{
            width: 100%;
            height: 400px;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child{
            width: 300px;
            height: 300px;
            background: blue;
        }
    </style>


    <div>
        <div></div>
    </div>

Diese Methode scheint etwas hochwertig zu sein und Sie müssen den untergeordneten Elementen überhaupt keine Aufmerksamkeit schenken.

（4）水平居中的方法，父元素：text-align：center

nbsp;html>


    <meta>
    <title>水平垂直居中4</title>
    <style>
        .container{
            background: red;
            width: 100%;
            height: 500px;
            text-align: center;
        }
        .child{
            background: blue;
            width: 300px;
            height: 300px;
            margin: auto;
        }
    </style>


    <div>
        <div></div>
    </div>

<span style="font-size: 14px; font-family: Microsoft YaHei">如果子元素里的文字不要水平居中的话，那么用此法将遇到不少麻烦。<strong>（5）水平居中方法，子元素：margin：0 auto;这个好说，不上代码了</strong>好了，关于居中问题就说这么多，如果你还有更好的方法，请告诉我。<br><strong>二、左侧固定宽度，右侧自适应</strong>这是一个比较常见的需求，下面介绍几种实现方法。
（1）左边定宽，左<a href="http://www.php.cn/code/11748.html" target="_blank">浮动</a>，右边不指定宽。</span>

nbsp;html>


    <meta>
    <title>做固定，右边自适应</title>
    <style>
    body{
        margin: 0;
    }
        .aside{
            background: red;
            width:200px;
            height: 500px;
            float: left;
        }
        .main {
            background: blue;
            height: 500px;
        }
    </style>


    <div>
        我是左边的
    </div>
    <div>
        我是主体
        我是主体
        我是主体
        我是主体
        我是主体
    </div>

Ich habe diese Methode zufällig bei Experimenten entdeckt und es war eine angenehme Überraschung.

(2) Verwenden Sie Polsterung, um Sitze zu belegen.

nbsp;html>


    <meta>
    <title>左侧固定右侧自适应</title>
    <style>
        .container {
            padding-left: 200px;
            width: 100%;
            position: relative;
        }
        .left{
            position: absolute;
            left: 0;
            right: 0;
            background: red;
            height: 500px;
            width: 200px;
        }
        .right{
            background: blue;
            width: 100%;
            height: 500px;
        }
    </style>


    <div>
        <div>zuobian</div>
        <div>
            新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。和俄罗斯联邦总统普京分别致贺信。
        </div>
    </div>

Beachten Sie, dass das Absolute außerhalb des Dokumentflusses liegt . Die 100 % von .right beziehen sich auf die Inhaltsbreite des übergeordneten Containers, nicht auf die gesamte Breite.

(3) Übergeordnetes Element: display:flex; ok

nbsp;html>


    <meta>
    <title>左边固定，右边自适应</title>
    <style>
        .container{
            display: flex;
        }
        .left{
            width: 200px;
            height: 500px;
            background: red;
        }
        .right{
            background: blue;
            height: 500px;
            flex: 1;
        }
    </style>


    <div>
        <div>zuobian</div>
        <div>
            新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。和俄罗斯联邦总统普京分别致贺信。
        </div>
    </div>

弹性盒子很强，有木有。但是有的是要加前缀的，哪些要加自己查去，有一次做实验，电脑样式正确，手机就是不对，搞了好半天。

（4）父：display：table;左右：display：table-cell;左：定宽。

nbsp;html>


    <meta>
    <title>左边固定，右边自适应</title>
    <style>
        .container{
            display: table;
        }
        .left{
            width: 200px;
            height: 500px;
            background: red;
            display: table-cell;
        }
        .right{
            background: blue;
            height: 500px;
            display: table-cell;
        }
    </style>


    <div>
        <div>zuobian</div>
        <div>
            新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。罗斯联邦总统普京分别致贺信。
        </div>
    </div>

据说这是一种古老的方法，我咋不知道呢？可能我比较年轻吧！

Das obige ist der detaillierte Inhalt vonDas CSS-Layout ist zentriert und ausgerichtet, die linke Seite hat eine feste Breite und die rechte Seite ist adaptiv. Detaillierte Einführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!