首頁 > 開發者 > JavaScript
css筆記——inline-block以及空白字元處理，cssinline-block
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>/**空白字元*/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;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
