简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

CSS左右固定，中间填满布局_html/css_WEB-ITnose

WBOY
Freigeben： 2016-06-24 11:36:51
Original
1278 Leute haben es durchsucht

先上个高清无码图：


源码： 

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <link href="reset.css" rel="stylesheet" /> <!--重置默认样式,你可以把这句注释掉-->    <style>        div {            line-height:60px; /*让字体垂直居中*/        }        div.box {            width: 100%;            height: 60px;            background: yellow;            text-align: center; /*让字体水平居中*/            color: white;        }            div.box div.left, div.right {                width: 60px;                height: 60px;                background: red;                            }            div.box div.left {                float: left;            }            div.box div.right {                float: right;            }            div.box div.center {                height: 60px;                background: green;                           }    </style></head><body>    <div class="box">        <div class="left">左固定</div>        <div class="right">右固定</div>        <div class="center">中间填满</div>          </div></body></html>
Nach dem Login kopieren



Verwandte Etiketten：
CSS左右固定，中间填满布局
Quelle：php.cn
Vorheriger Artikel：可自定义配置箭头的CSS3气泡提示框_html/css_WEB-ITnose Nächster Artikel：html-1_html/css_WEB-ITnose
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Umbenennung: feste Div-Spalten und verbleibende Breite Ich versuche, ein 5-Spalten-Layout zu erstellen, bei dem alle Spalten die volle Höhe des B...
Aus 2023-09-14 17:17:47
0
1
299
Projektimplementierungsmethode zur Begrenzung der Div-Höhe Ich habe ein dreispaltiges Layout, bei dem die mittlere Spalte Probleme mit der Höhe eines...
Aus 2023-09-13 20:46:45
0
1
204
Rasterspalten verzögern die Größenänderung bei Überlauf Ich habe ein 2×2-CSS-Raster, das das Browser-Ansichtsfenster mit fester Positionierung fül...
Aus 2023-09-06 21:25:59
0
1
252
Erstellen Sie ein Layout mit einem festen Bild auf der linken Seite, einer Schaltfläche auf der rechten Seite und zentriertem oder zentriertem Text Ich erstelle ein Layout für eine Essensbestellung, das links ein Bild, in der Mitte Text u...
Aus 2023-09-04 21:02:34
0
1
183
Verwenden Sie display:flex, um den verbleibenden vertikalen Raum mithilfe von CSS zu füllen In einem 3-Zeilen-Layout: Die Größe der oberen Zeile sollte ihrem Inhalt entsprechen. Die ...
Aus 2023-08-23 22:23:14
0
2
236
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！