절대 위치 지정을 사용하여 가로 2열 레이아웃 코드 구현-HTML 튜토리얼-php.cn

절대 위치 지정을 사용하여 가로 2열 레이아웃 코드 구현

高洛峰

풀어 주다： 2017-03-15 09:25:57

원래의

1507명이 탐색했습니다.

절대 위치 지정을 사용하여 가로 2열 레이아웃 구현

1. 왼쪽의 고정 너비 열의 높이> 오른쪽의 가변 너비 열

2. 절대 위치 사용 표준 문서 흐름에서 벗어나 원본 페이지의 형식을 변경하므로 왼쪽 열을 오른쪽 열보다 높게 만들어야 합니다. 왼쪽 열이 오른쪽 열보다 낮으면 오른쪽 열의 Overflow가 발생합니다. 이때 overflow: Hidden을 상위 요소에 설정하는 것을 생각해 볼 수 있습니다. 오른쪽 열이 잘려서 내용의 일부를 볼 수 없습니다.

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
          *{
              margin:0px;
              padding:0px;
          }
          .wrap{
              background:#777777;
              position:relative;
              overflow: hidden;
          }
          .border{
              background-color: #ccc;
              border:1px solid black;
              height:300px;
          }
          .left{
              width:200px;  /*定宽的列*/
              height:600px;
          }
          .right{
              width:100%;  /*自适应宽度的列*/
              height:300px;
              position:absolute;
              top:0px;
              left:220px;
          }
      </style>
  </head>
  <body>
      <div>
          <div class="left border"></div>
          <div class="right border"></div>
      </div>
  </body>
  </html>

로그인 후 복사

위 내용은 절대 위치 지정을 사용하여 가로 2열 레이아웃 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!