Verwenden Sie die absolute Positionierung, um horizontalen zweispaltigen Layoutcode zu implementieren-HTML-Tutorial-php.cn

Verwenden Sie die absolute Positionierung, um horizontalen zweispaltigen Layoutcode zu implementieren

高洛峰

Freigeben： 2017-03-15 09:25:57

Original

1447 Leute haben es durchsucht

Verwenden Sie absolute Positionierung, um ein horizontales zweispaltiges Layout zu implementieren

1 Die Höhe der Spalte mit fester Breite auf der linken Seite> die Spalte mit adaptiver Breite auf der rechten Seite

2. Verwenden Sie die absolute Positionierung. Dadurch wird der Standarddokumentfluss unterbrochen und das Format auf der Originalseite geändert. Der Zweck besteht darin, das übergeordnete Element zu strecken. Wenn die linke Spalte niedriger ist als die rechte Spalte, tritt ein Überlauf auf. Zu diesem Zeitpunkt können Sie darüber nachdenken, Überlauf: versteckt für das übergeordnete Element festzulegen Die rechte Spalte ist abgeschnitten und ein Teil des Inhalts ist nicht sichtbar

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonVerwenden Sie die absolute Positionierung, um horizontalen zweispaltigen Layoutcode zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!