Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie die absolute Positionierung, um horizontalen zweispaltigen Layoutcode zu implementieren

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

高洛峰
高洛峰Original
2017-03-15 09:25:571511Durchsuche

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>

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn