CSS2에서 2열 및 3열 레이아웃을 구현하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS2에서 2열 및 3열 레이아웃을 구현하는 방법

Oct 18, 2017 am 09:43 AM

css

머리말

모든 사람이 flex elastic 레이아웃에 익숙하다고 생각합니다. 이는 CSS3의 속성이지만 특정 호환성 문제가 있습니다. 며칠 전 인터뷰에서 저자는 2열 레이아웃을 디자인해야 하는 면접관을 만났습니다. 물론 부모 요소는 유연해야 한다고 말했지만 CSS2의 기본 속성 레이아웃을 사용해야 했는데, 이는 어리석은 일이었습니다. . .

요구사항: 2열 레이아웃, 왼쪽은 고정 너비, 오른쪽은 적응형

html 레이아웃은 다음과 같습니다

&lt;p id=&quot;father&quot;&gt;
    &lt;p id=&quot;left&quot;&gt;我是定宽左&lt;/p&gt;
    &lt;p id=&quot;right&quot;&gt;我是自适应右&lt;/p&gt;
&lt;/p&gt;

로그인 후 복사

1. 플렉스 레이아웃

#father{
            display: flex;
        }
        #left{
            background: red;
            height: 200px;
            width: 200px;
        }
        #right{
            background: green;
            height: 200px;
            flex:1;
        }

로그인 후 복사

 &lt;style&gt;
        #left{
            background: red;
            height: 200px;
            width: 200px;
            float:left;
        }
        #right{
            background: green;
            height: 200px;
            margin-left:200px;
        }
    &lt;/style&gt;

로그인 후 복사

참고:

다중 열 레이아웃을 사용하는 경우 적응형 요소 앞에 부동 요소의 html 코드를 작성해야 합니다. 다음은 3열 레이아웃의 코드입니다.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang=&quot;en&quot;&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style&gt;
        *{
            padding: 0;
            margin: 0;
        }
        #p1{
            width: 200px;
            height: 200px;
            background: red;
            float:left;
        }
        #p2{
            margin-left: 200px;
            margin-right:  200px;
            height: 200px;
            background: green;
        }
        #p3{
            width: 200px;
            height: 200px;
            background: red;
            float:right;
        }
    &lt;/style&gt;
    
&lt;/head&gt;
&lt;body&gt;
&lt;p id=&quot;box&quot;&gt;
    &lt;p id=&quot;p1&quot;&gt;我是左定宽&lt;/p&gt;
    &lt;p id=&quot;p3&quot;&gt;我是中间自适应&lt;/p&gt;
    &lt;p id=&quot;p2&quot;&gt;我是右定宽&lt;/p&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

효과는 다음과 같습니다.