La solution à la table Web ou à la couche div étirée dans la production de pages Web page_HTML/Xhtml_Web

Lorsque nous concevons des pages Web, nous rencontrons toujours des choses désagréables. La plus courante est de constater que la page affichée est étirée après l'ajout de contenu en arrière-plan, ce qui rend la page Web extrêmement inesthétique. Dans le passé, tout le monde concevait essentiellement des tableaux, et il y avait naturellement de nombreuses solutions sur Internet. De nos jours, il existe également des conceptions standard div css, et il est rare de voir de bonnes méthodes associées. Maintenant, Xiaoxiang Online a trouvé un bon moyen d'éviter les tableaux. d'être étiré. Résumez-le et partagez-le avec tout le monde.
1. Définissez la taille de l'image directement sur la page Web, par exemple le code : Bien que cela puisse limiter la taille de l'image, vous devez modifier manuellement la taille de l'image avant de télécharger l'image, sinon l'image téléchargée sera. déformé.
2. Utilisez le code suivant :
Cette méthode sera automatiquement réduite à la largeur spécifiée lors de l'appel de l'image. Elle ne provoquera pas de déformation de l'image et ne fera pas éclater le tableau. Cependant, l'inconvénient est que si l'image est trop grande, elle ne le sera pas. traité pendant le processus de téléchargement de l'image, c'est-à-dire que pendant le processus d'affichage de l'image, l'image sera d'abord affichée dans sa taille d'origine, à ce moment-là, le tableau éclatera et la page sera laide. affiché, l’image rétrécira automatiquement à nouveau.
3. Nous pouvons limiter la taille des attributs du tableau pour éviter qu'il ne soit étiré. Par exemple, ajoutez le code "style="table-layout:fixed;word-wrap:break-word;word-break;break. " in -all;"", où "table-layout:fixed;" consiste à corriger la disposition du tableau, ce qui peut efficacement empêcher l'étirement du tableau, et "word-wrap:break-word;" consiste à contrôler les sauts de ligne, c'est-à-dire forcer les sauts de ligne. Ceci doit être utilisé lorsqu'il y a beaucoup de contenu textuel, en particulier lorsque du contenu répété apparaît. Si les sauts de ligne ne sont pas effectués, le tableau sera étiré et "word-break: break" -all;" peut résoudre IE. Le problème est que le cadre est étiré par l'anglais (lignes de texte en langue non asiatique), mais il ne forcera pas de saut de ligne et affichera uniquement le contenu dans la largeur du tableau. Dans des circonstances normales, utilisez simplement "style="table-layout:fixed;word-wrap:break-word;"". Bien entendu, l'instruction appelée ci-dessus peut être définie en CSS, comme
table {
table-layout : fixe;
word-wrap:break-word;
}
4. Utilisez CSS pour contrôler la taille adaptative des images. Le code est le suivant :
img {
largeur maximale : 600px;
width:expression(this.width > 600 ? "600px" : this.width);
overflow:hidden;
}
Parmi eux, max-width : 600px ; dans IE7, FireFox et autres navigateurs non-IE, la largeur maximale est de 600px, mais elle n'est pas valide dans IE6 ; 600px, lorsque la taille de l'image est supérieure à 600px, elle sera automatiquement réduite à 600px, ce qui est valable dans IE6 ; et overflow:hidden signifie masquer la partie qui dépasse la taille définie pour éviter la propagation et la déformation de l'image ; tableau causé par l’incapacité de contrôler la taille de l’image.
5. Enfin, résumez les codes les plus pratiques :
S'il s'agit d'un formulaire, veuillez utiliser :
table {
table-layout : corrigé ;
word-break : break-all ;
}
S'il s'agit d'une couche div, veuillez utiliser :

div {
table-layout: fixed;
word-wrap: break-word;
width: plus width;
overflow: caché; (Laissez l'extra ne pas être affiché.)
}