简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

经典DIV+CSS案例--两列高度自适应_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 12:30:21
original
1275 Les gens l'ont consulté

相信很多人都非常喜欢用div+css布局,无论你是前端开发者，还是后台程序员，因为它的好处实在太多，可以用很少的代码来控制布局，然后用CSS表现其形态，表现和样式分离。而且在SEO方面，它还能提供30%的优化，我们何乐而不为呢。

很多人都会碰到如题的布局问题，解决方案很多，可以用背景图来填充，或用js来控制，但终不是最佳方案，最好还是从DIV,CSS本身来考虑:

以下为三行两列的的经典模式，还可以演变成多种布局，有待大家修改:

 

Code
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



两列高度自适应










我在左边
 
我在左边
 
我在左边

我在左边
 
我在左边
 
我在左边
 
我在左边

我在左边

我在左边
 
我在左边

我在左边
 
我在左边

我在左边

我在左边

我在左边

我在左边
 
我在左边





我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文


  










 

配上效果图：

 

 

 

 

本方案在IE6，IE7，IE8，FF下均测试通过，虽然简单，但是用处广泛，希望对广大web标准爱好者有所帮助

Étiquettes associées：
经典DIV+CSS案例--两列高度自适应
source：php.cn
Article précédent：DIV+CSS网页布局常用的书写规范_html/css_WEB-ITnose Article suivant：使用DIV+CSS网页布局在SEO优化的优势_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1810
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1963
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1660
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1563
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1592
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！