Maison interface Web tutoriel HTML 经典DIV+CSS案例--两列高度自适应_html/css_WEB-ITnose

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

Jun 24, 2016 pm 12:30 PM

相信很多人都非常喜欢用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标准爱好者有所帮助

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

<🎜>: Dead Rails - Comment apprivoiser les loups
4 Il y a quelques semaines By DDD
Niveaux de force pour chaque ennemi et monstre de R.E.P.O.
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
<🎜>: Grow A Garden - Guide de mutation complet
2 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Tutoriel Java
1657
14
Tutoriel PHP
1257
29
Tutoriel C#
1231
24
HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

HTML, CSS et JavaScript: outils essentiels pour les développeurs Web HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

HTML: The Structure, CSS: The Style, Javascript: Le comportement HTML: The Structure, CSS: The Style, Javascript: Le comportement Apr 18, 2025 am 12:09 AM

Les rôles de HTML, CSS et JavaScript dans le développement Web sont: 1. HTML définit la structure de la page Web, 2. CSS contrôle le style de page Web, et 3. JavaScript ajoute un comportement dynamique. Ensemble, ils construisent le cadre, l'esthétique et l'interactivité des sites Web modernes.

L'avenir de HTML: évolution et tendances de la conception Web L'avenir de HTML: évolution et tendances de la conception Web Apr 17, 2025 am 12:12 AM

L'avenir de HTML est plein de possibilités infinies. 1) Les nouvelles fonctionnalités et normes comprendront plus de balises sémantiques et la popularité des composants Web. 2) La tendance de la conception Web continuera de se développer vers une conception réactive et accessible. 3) L'optimisation des performances améliorera l'expérience utilisateur grâce à des technologies de chargement d'image réactives et de chargement paresseux.

L'avenir de HTML, CSS et JavaScript: Tendances de développement Web L'avenir de HTML, CSS et JavaScript: Tendances de développement Web Apr 19, 2025 am 12:02 AM

Les tendances futures de HTML sont la sémantique et les composants Web, les tendances futures de CSS sont CSS-in-JS et CSShoudini, et les tendances futures de JavaScript sont WebAssembly et sans serveur. 1. La sémantique HTML améliore l'accessibilité et les effets de référencement, et les composants Web améliorent l'efficacité du développement, mais l'attention doit être accordée à la compatibilité du navigateur. 2. CSS-in-JS améliore la flexibilité de gestion du style mais peut augmenter la taille du fichier. CSShoudini permet le fonctionnement direct du rendu CSS. 3.WeBassembly optimise les performances de l'application du navigateur mais a une courbe d'apprentissage abrupte, et sans serveur simplifie le développement mais nécessite une optimisation des problèmes de démarrage à froid.

See all articles