Rendre la largeur div adaptative pour l'enseignement-tutoriel HTML-php.cn

Rendre la largeur div adaptative pour l'enseignement

php中世界最好的语言

Libérer： 2017-11-29 11:46:18

original

5620 Les gens l'ont consulté

Nous savons tous que lors de la mise en page CSS, lorsqu'aucun style n'est défini pour le div, le div occupe une ligne exclusive et le style CSS par défaut est de 100 % de largeur. Cette fois, nous allons donc vous apprendre à implémenter une largeur de DIV adaptative mais. la largeur augmente de zéro avec le contenu. Et la largeur augmente ? Au lieu de définir la largeur du plein écran à 100 % depuis le début

Solution :

Utilisez CSS float pour que la largeur par défaut du div soit 100 % adaptative. effet de largeur adaptatif basé.

Un petit cas de démarrage de la largeur div à partir de zéro en utilisant CSS

1 Code HTML+CSS complet

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>小实例</title> 
<style> 
.case{ float:left} 
</style> 
</head> 
<body> 
<div>未设置float内容一</div> 
<div>未设置float内容二</div> 
<div class="case">加float样式的内容三</div> 
<div class="case">对其加float样式的内容四</div> 
</body> 
</html>

Copier après la connexion

Code clé : ajouter un flotteur au divfloat. Style, pour que sa largeur ne commence pas à 100%, mais change avec la quantité de contenu, tout comme la largeur initiale de span, qui augmente à mesure que le contenu augmente.

Résumé :

La définition de float sur un div via CSS supprime le style de largeur plein écran par défaut du div, mais vous devez généralement utiliser une telle boîte qui adapte la largeur du contenu à partir de zéro, et vous ne pouvez pas utiliser le style float. Cela peut être réalisé en utilisant la balise span.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php Autres articles liés !

Lecture connexe :

Comment changer le style de survol de la souris sans utiliser CSS

Opération Js Le processus de l'objet DOM

Appeler la méthode du fichier CSS de différentes résolutions

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!