2열 레이아웃(한 열은 고정 너비이고, 다른 열은 적응형이며, 열의 높이가 동일함)-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

2열 레이아웃(한 열은 고정 너비이고, 다른 열은 적응형이며, 열의 높이가 동일함)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 20, 2016 am 03:30 AM

구조:

<span style="color: #008080;">1</span>    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="parent"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>left<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>right<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>right<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">8</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">9</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

로그인 후 복사

1. table+table-cell을 사용하여 2열 레이아웃을 구현합니다(한 열은 너비가 고정되고, 한 열은 조정 가능하며, 표는 자동으로 두 열과 높이가 동일함).

<span style="color: #008080;"> 1</span> <span style="color: #000000;">.parent {
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">        background-color: grey;
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">        width: 500px;
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">        height: 300px;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">        padding: 10px;
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">        box-sizing: border-box;
</span><span style="color: #008080;"> 7</span> 
<span style="color: #008080;"> 8</span> <span style="color: #000000;">        display: table;
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">        table-layout: fixed;
</span><span style="color: #008080;">10</span> <span style="color: #000000;">        table-layout: fixed;/*加速table的渲染，实现布局优先*/
</span><span style="color: #008080;">11</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">12</span> <span style="color: #000000;">    .left {
</span><span style="color: #008080;">13</span> <span style="color: #000000;">        display: table-cell;
</span><span style="color: #008080;">14</span> <span style="color: #000000;">        width: 100px;
</span><span style="color: #008080;">15</span> 
<span style="color: #008080;">16</span> <span style="color: #000000;">        background-color: skyblue;
</span><span style="color: #008080;">17</span> <span style="color: #000000;">        border-right: 10px solid transparent;
</span><span style="color: #008080;">18</span> <span style="color: #000000;">        background-clip: padding-box;/*设置背景的显示位置*/
</span><span style="color: #008080;">19</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">20</span> <span style="color: #000000;">    .right {
</span><span style="color: #008080;">21</span> <span style="color: #000000;">        display: table-cell;
</span><span style="color: #008080;">22</span> <span style="color: #000000;">        background-color: greenyellow;
</span><span style="color: #008080;">23</span>     }

로그인 후 복사

2. 2열 레이아웃에 flex를 사용합니다. flex의 align-item 속성 기본값은 Stretch입니다.

<span style="color: #008080;"> 1</span> <span style="color: #000000;">.parent {
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">        background-color: grey;
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">        width: 500px;
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">        height: 300px;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">        padding: 10px;
</span><span style="color: #008080;"> 6</span> 
<span style="color: #008080;"> 7</span> <span style="color: #000000;">        display: flex;
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">    }
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">    .left {
</span><span style="color: #008080;">10</span> <span style="color: #000000;">        width: 100px;
</span><span style="color: #008080;">11</span> <span style="color: #000000;">        margin-right: 10px;
</span><span style="color: #008080;">12</span> <span style="color: #000000;">        background-color: skyblue;
</span><span style="color: #008080;">13</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">14</span> <span style="color: #000000;">    .right {
</span><span style="color: #008080;">15</span> <span style="color: #000000;">        flex: 1; /* 填充剩余部分 */
</span><span style="color: #008080;">16</span> <span style="color: #000000;">        background-color: greenyellow;
</span><span style="color: #008080;">17</span>     }

로그인 후 복사

3. 부동소수점(의사 높이)을 사용하세요

<span style="color: #008080;"> 1</span> <span style="color: #000000;">.parent {
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">        background-color: grey;
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">        width: 500px;
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">        height: 300px;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">        padding: 10px;
</span><span style="color: #008080;"> 6</span> 
<span style="color: #008080;"> 7</span> <span style="color: #000000;">        overflow: hidden;/*截断*/
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">    }
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">    .left,.right {
</span><span style="color: #008080;">10</span> <span style="color: #000000;">        padding-bottom: 99999px;
</span><span style="color: #008080;">11</span> <span style="color: #000000;">        margin-bottom: -99999px;
</span><span style="color: #008080;">12</span> <span style="color: #000000;">    }/*登高*/
</span><span style="color: #008080;">13</span> <span style="color: #000000;">    .left {
</span><span style="color: #008080;">14</span> <span style="color: #000000;">        width: 100px;
</span><span style="color: #008080;">15</span> <span style="color: #000000;">        background-color: skyblue;
</span><span style="color: #008080;">16</span> <span style="color: #000000;">        margin-right: 10px;
</span><span style="color: #008080;">17</span> <span style="color: #000000;">        float: left;
</span><span style="color: #008080;">18</span>         
<span style="color: #008080;">19</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">20</span> <span style="color: #000000;">    .right {
</span><span style="color: #008080;">21</span> <span style="color: #000000;">        overflow: hidden;
</span><span style="color: #008080;">22</span> <span style="color: #000000;">        background-color: yellowgreen;
</span><span style="color: #008080;">23</span>     }

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.