Heim > Artikel > Web-Frontend > css笔记--inline-block以及空白字符处理_html/css_WEB-ITnose
css笔记--inline-block以及空白字符处理_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:22:15963Durchsuche
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>
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;}
效果图
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：基于视窗单位的排版_html/css_WEB-ITnoseNächster Artikel：HTML相关知识和经验的碎片化记录_html/css_WEB-ITnose