Use absolute positioning to implement horizontal two-column layout code

高洛峰
Release: 2017-03-15 09:25:57
Original
1488 people have browsed it

Use absolute positioningAchieve horizontal two-column layout

1. The height of the fixed-width column on the left > the adaptive-width column on the right

2.Use absolute positioning It will break away from the standard document flow and change its format in the original page, so you need to make the left column higher than the right column. The purpose is to stretch the parent element. If the left column is lower than the right column, then the right column Overflow will occur. At this time, you may think of setting overflow:hidden to the parent element; but you will find that the content of the right column is truncated and part of the content cannot be seen.

<!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>
Copy after login

The above is the detailed content of Use absolute positioning to implement horizontal two-column layout code. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!