Maison > interface Web > tutoriel HTML > css笔记--inline-block以及空白字符处理_html/css_WEB-ITnose

css笔记--inline-block以及空白字符处理_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:22:15
original
1012 Les gens l'ont consulté

 

 

html

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 	<title>无标题</title>	<link rel="stylesheet" type="text/css" href="css/whiteSpace.css"></head><body>	<div class="container">		<div class="left">						<span>								2223333333333333333333333333333333333333333333333333333333333333333333333333333333333			</span>		</div>		<div class="right">			<span>222222222222222222222222222222222</span>		</div>	</div>	<div style="clear:both"></div>	<div class="main">		<div class="myLft">						123		</div>		<div class="myRgt">						456		</div>	</div></body></html>
Copier après la connexion

css

/**空白字符*/body{	margin:0;	padding:0;}/*行内元素*/.right , .left{	margin:0;	padding:0;	display: inline-block;	width:50%;	height: 100px;	word-break:break-all;	word-wrap:break-word;	white-space:normal;	line-height:0;	font-size:15px;	vertical-align:text-top;	}.left{	background-color: #428bca;}.left span ,.right span{	line-height:1.28;}.right{	background-color:#F00;}.container{	width:100%;	/*white-space: nowrap;*/	font-size:0;}/*.left span{	white-space:pre-line;}*//*浮动元素*/.main{	width:100%;	margin:100px 0;	padding:0;	height:100px;}.myLft,.myRgt{	float:left;	width:50%;	height:100px;}.myLft{	background-color:#428bca;}.myRgt{	background-color:#f00;}.main:before,.main:after{	display:table;	height:0;	content:'';	clear:both;}
Copier après la connexion

 

效果图

  

 

source:php.cn
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