网页排字，表格已死，图片文字排列CSS，DIV+CSS长存

网页排版，表格已死，图片文字排列CSS，DIV+CSS长存
在浏览器中显示如下：

caption 1

caption 2

caption 3

caption 1

caption 2

caption 3

caption 1

caption 1

?

?

现在，假设在页面上显示的不止一种缩略图，你希望通过背景和/或边框将它们从视觉上区分开来。那么只需将它们包在一个容器层(container DIV)之内即可：

div.container {  border: 2px dashed #333;  background-color: #ffe;  }

但是我们这样做时会碰到一个问题。当你在CSS中将一个元素设置为浮动时，它不再占据任何“空间”并且背景和边框将显示在这些图片上方而不是围绕在它周围。我们需要在容器层中插入一些除浮动层之外的元素。例如间隔层（spacer DIV）。

div.spacer {  clear: both;  }

HTML代码如下（注意容器层内上下各有一个间隔层）：

<div width="100" height="100"  alt="网页排字，表格已死，图片文字排列CSS，DIV+CSS长存" /><br />  <p>caption 1</p></div><div width="100" height="100"  alt="网页排字，表格已死，图片文字排列CSS，DIV+CSS长存" /><br />  <p>caption 2</p></div><div width="100" height="100"  alt="网页排字，表格已死，图片文字排列CSS，DIV+CSS长存" /><br />  <p>caption 3</p></div><div alt="网页排字，表格已死，图片文字排列CSS，DIV+CSS长存" width="100" src="//img.reader8.net/uploadfile/jiaocheng/2014/0125/201401251843097268.gif">
caption 1
caption 2
caption 3
现在的大部分浏览器?并不提醒访问者们，页面文字背后存在着一些用于帮助理解首字母缩写和缩略语的注释。让我们来看看CSS如何。
在样式表中，你可以为这些标记符添加下边框，以吸引页面访问者的注意力。同时可以利用CSS将鼠标指针变成“帮助”状态（通常是一个问号)，当然，浏览器必须支持。你不会被HTML的标记符所限制。创建一个名为.help的类并且利用SPAN为那些迷惑的读者们提供更多的信息。
CSS?如下：
abbr, acronym, .help {  border-bottom: 1px dotted #333;  cursor: help;  }
... 用来协助?标题属性（TITLE attribute）为缩略语或首字母缩写标记符添加下划线，而又要不同于超链接的下划线。将指针变成“帮助”状态意味这些字是不可点击的，标题属性则是将缩略语或首字母缩写展开。我第一次看到这样的效果是在站点?Sander Tekelenburg?上。
二次检查...
我第一次读到有关将列表内嵌显示的文章是在 Bos 和 Lie 的?Cascading Style Sheets?一书中。而第一次看到它应用是在 Christopher Schmitt 的网站?Babble List website?。这个技巧是让列表内嵌或水平显示。代替了：
Item oneItem twoItem three
而得到：
Item one?Item two?Item three
加入了内补丁和边框的效果：
Item one
Item two
Item three
CSS：
li.inline {  display: inline;  padding-left: 3px;  padding-right: 7px;  border-right: 1px dotted #066;  }li.last {  display: inline;  padding-left: 3px;  padding-right: 3px;  border-right: 0px;  } 
HTML：
<ul><li class="inline">Item one</li><li class="inline">Item two</li><li class="last">Item three</li></ul>