多列样式布局_html/css_WEB-ITnose
效果图如下：
代码如下：
1 <!DOCTYPE html> 2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 <meta charset="UTF-8"> 4 <title>Document</title> 5 <style> 6 * { 7 margin: 0; 8 padding: 0; 9 } 10 h2 { 11 margin: 20px 0; 12 } 13 .left1 { 14 width: 200px; 15 height: 100px; 16 green; 17 } 18 .right1 { 19 width: 60%; 20 height: 100px; 21 red; 22 } 23 .left2 { 24 width: 200px; 25 height: 100px; 26 green; 27 display: inline-block; 28 } 29 .right2 { 30 width: 60%; 31 height: 100px; 32 red; 33 display: inline-block; 34 } 35 .left3 { 36 width: 200px; 37 height: 100px; 38 float: left; 39 green; 40 } 41 .right3 { 42 width: 60%; 43 height: 100px; 44 float: right; 45 red; 46 } 47 .mainL, .sitebarL, .mainR, .sitebarR { 48 height: 200px; 49 /*font: bolder 20px/200px '微软雅黑';*/ 50 color: #fff; 51 text-align: center; 52 } 53 .mainL { 54 width: 100%; 55 float: left; 56 } 57 .mainR { 58 width: 100%; 59 float: right; 60 } 61 .mainL .contentL { 62 height: 100%; 63 margin-right: 200px; 64 red; 65 } 66 .mainR .contentR { 67 height: 100%; 68 margin-left: 200px; 69 red; 70 } 71 .contentLR { 72 height: 100%; 73 margin-left: 200px; 74 margin-right: 200px; 75 red; 76 } 77 .sitebarL { 78 width: 200px; 79 float: left; 80 margin-right: -100%; 81 green; 82 } 83 .sitebarR { 84 width: 200px; 85 float: right; 86 margin-left: -100%; 87 green; 88 } 89 .clear { 90 width: 100%; 91 clear: both; 92 height: 10px; 93 } 94 #left { 95 float: left; 96 width: 200px; 97 height: 100px; 98 green; 99 }100 101 #contentL {102 height: 100px;103 red;104 margin-left: 200px;/*==等于右边栏宽度==*/105 }106 #right {107 float: right;108 width: 200px;109 height: 100px;110 green;111 }112 113 #contentR {114 height: 100px;115 red;116 margin-right: 200px;/*==等于左边栏宽度==*/117 }118 #contentLR {119 height: 100px;120 red;121 margin: 0 200px;122 }123 .cont {124 overflow: hidden;125 }126 </style>127 </head>128 <body>129 <h2 id="普通文档布局">普通文档布局</h2>130 <div class="left1">Left</div>131 <div class="right1">Right</div>132 <div class="clear"></div>133 134 135 <h2 id="行内布局使用inline-block">行内布局使用inline-block</h2>136 <div class="left2">Left</div>137 <div class="right2">Right</div>138 <div class="clear"></div>139 140 141 <h2 id="浮动布局float">浮动布局float</h2>142 <div class="left3">Left:<br>143 width: 200px;<br>144 height: 100px;<br>145 float: left;<br>146 green;147 </div>148 <div class="right3">Right<br>149 width: 60%;<br>150 height: 100px;<br>151 float: right;<br>152 red;153 </div>154 <div class="clear"></div>155 156 157 <h2 id="浮动布局float-margin正边距与多列布局">浮动布局float+margin正边距与多列布局</h2>158 <h3 id="两列">两列</h3>159 <div id="left">160 Left Sidebar<br>161 float: left;<br>162 width: 200px;<br>163 height: 100px;<br>164 green;<br>165 </div>166 <div id="contentL">167 height: 100px;168 red;169 margin-left: 200px;/*==等于左边栏宽度==*/170 <div id="contentInner">171 Main Content172 </div>173 </div>174 <div class="clear"></div>175 <div id="right">176 Right Sidebar<br>177 float: right;<br>178 width: 200px;<br>179 height: 100px;<br>180 green;181 </div>182 <div id="contentR">183 height: 100px;184 red;185 margin-right: 200px;/*==等于右边栏宽度==*/186 <div id="contentInner">187 Main Content188 </div>189 </div>190 <div class="clear"></div>191 <h3 id="三列">三列</h3>192 <div id="left">193 Left Sidebar<br>194 float: left;<br>195 width: 200px;<br>196 height: 100px;<br>197 green;<br>198 </div>199 <div id="right">200 Right Sidebar<br>201 float: right;<br>202 width: 200px;<br>203 height: 100px;<br>204 green;205 </div>206 <div id="contentLR">207 <div id="contentInner">208 Main Content<br>209 height: 100px;<br>210 red;<br>211 margin: 0 200px;<br>212 </div>213 </div>214 215 216 <h2 id="浮动布局float-margin负边距与多列布局">浮动布局float+margin负边距与多列布局</h2>217 <h3 id="两列">两列</h3>218 <div class="sitebarL">219 <h4 id="左侧定宽-px区块">左侧定宽200px区块</h4>220 <p>width: 200px;221 float: left;222 margin-right: -100%;223 green;224 </p>225 </div>226 <div class="mainR">227 <div class="contentR">228 <h4 id="右侧主体自适应区块">右侧主体自适应区块</h4>229 <p>.mainR:width: 100%;230 float: right;</p>231 <p>.contentR:height: 100%;232 margin-left: 200px;233 red;234 </p>235 </div>236 </div>237 <div class="clear"></div>238 <div class="mainL">239 <div class="contentL">240 <h4 id="左侧主体自适应区块">左侧主体自适应区块</h4>241 <p>.mainL:width: 100%;242 float: left;</p>243 <p>.contentL:height: 100%;244 margin-right: 200px;245 red;</p>246 </div>247 </div>248 <div class="sitebarR">249 <h4 id="右侧定宽-px区块">右侧定宽200px区块</h4><h4 id="p-width-px-float-right-margin-left-green-p">250 <p>width: 200px;251 float: right;252 margin-left: -100%;253 green;254 </p>255 </h4></div>256 <div class="clear"></div>257 <h3 id="三列">三列</h3>258 <div class="sitebarL">259 <h4 id="左侧定宽-px区块">左侧定宽200px区块</h4>260 <p>width: 200px;261 float: left;262 margin-right: -100%;263 green;264 </p>265 </div>266 <div class="mainL">267 <div class="contentLR">268 <h4 id="主体自适应区块">主体自适应区块</h4>269 <p>.mainR:width: 100%;270 float: left;271 </p>272 <p>.contentLR:height: 100%;273 margin-left: 200px;274 margin-right: 200px;275 red;276 </p>277 </div>278 </div>279 <div class="sitebarR">280 <h4 id="右侧定宽-px区块">右侧定宽200px区块</h4><h4 id="p-width-px-float-right-margin-left-green-p">281 <p>width: 200px;282 float: right;283 margin-left: -100%;284 green;285 </p>286 </h4></div>287 <div class="clear"></div> 288 </body></html>
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
