css笔记--inline-block以及空白字符处理_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:22:15996瀏覽
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;}
效果图
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn