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;

}

效果图

　　

　

css笔记——inline-block以及空白字符处理的更多相关文章

  1. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  2. CSS——display（Block none inline等）属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  3. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  4. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  5. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  6. css中inline、block、inline-block的区别

    http://www.cnblogs.com/fxair/archive/2012/07/05/2577280.html display:inline就是将元素显示为块级元素. block元素的特点是 ...

  7. CSS基础：block，inline和inline-block

    css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block.inline和inline-block. HTML组件中呈现一片空白区域的组件都可当盒模型(bo ...

  8. CSS的inline、block与inline-block

    基本知识点 行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局. 块级元素(block):独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默 ...

  9. 前端之旅HTML与CSS篇之block与inline的区别

    display:block;和display:inline;的区别block元素特点: 1)处于常规流中时,如果width没有设置,会自动填充满父容器 2)可以应用margin/padding 3)在 ...

随机推荐

  1. linux下的shell命令的编写，以及java怎样调用linux的shell命令(java怎样获取linux上的网卡的ip信息)

    程序猿都非常懒,你懂的! 近期在开发中,须要用到server的ip和mac信息.可是server是架设在linux系统上的,对于多网口,在获取ip时就产生了非常大的问题.以下是在windows系统上, ...

  2. 极限编程(XP)基本原则与规范

    1. 坐在一起(Sitting Together) 尽可能让团队成员坐在一起,Kent Block在一次芝加哥的某个濒临困境的项目中发现,虽然这个团队都是由程序 精英组成,但是却陷入困境,后来他发现, ...

  3. C++ AfxBeginThread

    计算从1+2+3...+100000=? 关键点 CWinThread* AfxBeginThread( AFX_THREADPROC pfnThreadProc, LPVOID pParam, in ...

  4. C++技术问题总结-第12篇 设计模式原则

    设计模式六大原则,參见http://www.uml.org.cn/sjms/201211023.asp. 1. 单一职责原则 定义:不要存在多于一个导致类变更的原因.通俗的说,即一个类仅仅负责一项职责 ...

  5. mysql 分布式事务

    php + mysql 分布式事务 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元: 事务应该具有4个属性:原子性.一致性.隔离性.持续性 原子性(atomicit ...

  6. PHP做好防盗链的基本思想 防盗链的设置方法

    盗链是指服务提供商自己不提供服务的内容,通过技术手段绕过其它有利益的最终用户界面(如广告),直接在自己的网站上向最终用户提供其它服务提供商的服务内容,骗取最终用户的浏览和点击率.受益者不提供资源或提供 ...

  7. MYSQL 分析表、检查表和优化表

    1. 对表进行优化 ( 优化表主要作用是消除删除或者更新造成的空间浪费) 2. 对表进行分析(分析关键字的分布, 分析并存储MyISAM和BDB表中键的分布) 3. 对表进行检查(检查表的错误,并且为 ...

  8. Android进阶笔记09：Android开发经验部分总结

    1. 在Android library中不能使用switch-case语句访问资源ID:在Android library中不能使用switch-case语句访问资源ID的原因分析及解决方案 2. 不能 ...

  9. 线程2 NSOperation 抽像类的使用

    // // ZYOperationViewController.h // Thread // // Created by yejiong on 14 // // ZYOperation.h // Th ...

  10. python(4)–yield实现异步

    首先我们假设一个情景:一个人做包子,一次只能做一个:来了两个吃包子的,做包子做好了包子依次分给两个吃包子的. 先上代码: import time ''' 一个做包子吃包子模型,一个做包子的,两个吃包子 ...