Maison > interface Web > tutoriel CSS > le corps du texte

Comment mettre en place l'adaptation médiane de la box flexible (tutoriel de code)

云罗郡主
Libérer: 2018-10-19 15:11:59
avant
3935 Les gens l'ont consulté

Le contenu de cet article explique comment configurer l'adaptation intermédiaire de la boîte flexible (tutoriel de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Comment mettre en place ladaptation médiane de la box flexible (tutoriel de code)

nbsp;html>


	<meta>
	<title>弹性盒子中间自适应</title>
	<style>
	/*
		父级添加
			display:-webkit-box;
			display:-moz-box;
		子级添加
			box-flex:1;
			-webkit-box-flex:1;
			-moz-box-flex:1;
			定义子容器占的比例, 具体计算规则,父容器-定宽,剩余的按比例等分。
			但实际计算中并没有实现等分(子容器中还有元素时),常用的解决方法是,
			数字 1 为所占的份数
			添加宽度百分比和box-sizing: border-box;(解决border和padding问题)

	*/
	#wrap{
		width:100%;
		margin:0 auto;
		background: #ccc;
		display:-webkit-box;
		display:-moz-box;
	}
	#left{
		width:100px;
		padding:10px;
		background:#09F;
	}
	#content{
		/*width:400px;*/
		padding:10px;
		background:#30C;
		box-flex:1;
		-webkit-box-flex:1;
		-moz-box-flex:1;
	}
	#right{
		/*width:100px;*/
		padding:10px;
		background:#F0F;
		box-flex:1;
		-webkit-box-flex:1;
		-moz-box-flex:1;
	}

	#left,#content,#right{
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
	}
	</style>



	<p>
		</p><p>#f00</p>
		<p>#0f0</p>
		<p>#00F</p>
	

Copier après la connexion

Ce qui précède est une introduction complète à la façon de configurer l'adaptation médiane de la boîte flexible (tutoriel de code), si vous souhaitez en savoir plus sur CSS Pour les didacticiels vidéo , veuillez faire attention au site Web PHP chinois.


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!

Étiquettes associées:
source:csdn.net
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal