看似简单的问题其实不简单

简介: 使用CSS以后,读者会发现很多原来使用表格布局非常小儿科的问题,都变得不那么简单了。比如xiaoyh119读者希望实现一个如下的效果。 具体标题-1More 也就是在一行中,一个标题文字居左,又端放置另一个文字,以便制作一个详细内容的连接。

使用CSS以后,读者会发现很多原来使用表格布局非常小儿科的问题,都变得不那么简单了。比如xiaoyh119读者希望实现一个如下的效果。

具体标题-1More

也就是在一行中,一个标题文字居左,又端放置另一个文字,以便制作一个详细内容的连接。这样的样式,如果使用表格表格布局非常简单,只要使用一个一行两列的表格就解决了,代码如下。

1
2
3
4
5
<table>
   <tr>
      <td>具体文章标题</td><td align="right">More</td>
   </tr>
</table>

而如果使用CSS又该如何实现呢?首先我们仍顺着使用表格的思路,把左右两端的文字分别置入一个span标记中:

1
2
3
4
<h4 id="main-1">
    <span class="title">具体标题-1</span>
    <span class="more">More</span>
</h4>

那么CSS又该怎么写呢?为了能够使两个span中的文字在同一行中,因此一定要CSS中的浮动的性质来实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#main-1 {
	font-size: 12px;
	width:300px;
        margin:0 auto;
	border:1px gray solid;
}
 
#main-1 span.title{
	float:left;
}
 
#main-1 span.more{
	text-align:right;
	display:block;
}

这里首先将左边的文字设置为向左浮动,从而脱离标准流,这时它后面的文字会围绕它排列,从而使右边的“More”文字出现在同一行,但是为了使“More”文字位于最右端,就需要时这个span变为块级元素,这样它才会自动扩展,然后通过text-align:right使文字能够右对齐。

现在回头思考一下,我们上面的思路是仍然沿用了表格布局的思路进行的,那么进一步考虑一下,这个案例是否可以简化呢,实际上如果我们对HTML代码稍稍修改,就可以使CSS代码大幅度化简,首先把左右两端的文字交换一下位置:

1
2
3
<h4 id="main-1">
    <span class="more">More</span>具体标题-1
</h4>

那么CSS又该怎么写呢?为了能够使两个span中的文字在同一行中,因此一定要CSS中的浮动的性质来实现:

1
2
3
#main-1 span.more{
        float:right;
}

可以看到,这种方法,代码就比前面的方法简单了很多。因此,这里例子代码很简单,但是从中可以看出一个很有用的道理,用CSS进行页面的设计和布局,无论是一个复杂的大布局,还是一个简单的小样式,关键实现要真正把CSS的核心原理搞懂,比如这里的“盒子模型”、“标准流”、“浮动”和“定位”等基本原理,都真正理解清楚。

今天先讲到这里,后面我们还会继续沿着这里的案例继续探索和深入,更好地理解CSS的奥妙。如果对这个案例感兴趣,但是对具体原理不是很理解的读者,建议您再仔细研究一下《CSS设计彻底研究》视频教程的第1~4课。

最后,在给读者朋友一个“思考题”,这是袁马飞读者提出的问题,他希望实现如下这个效果,也就是文字要分为左中右三段,左右两端分局左右两端,中间段靠着左段,并且要求,鼠标指针经过时,相应的列表行背景变色,有兴趣的读者可以考虑一下,应该如何实现呢?能够实现IE6/IE7/Firefox都兼容吗?必须使用Javascript吗?如果使用Javascript又该怎么写呢?

目录
相关文章
|
机器学习/深度学习 并行计算 测试技术
MLX vs MPS vs CUDA:苹果新机器学习框架的基准测试
如果你是一个Mac用户和一个深度学习爱好者,你可能希望在某些时候Mac可以处理一些重型模型。苹果刚刚发布了MLX,一个在苹果芯片上高效运行机器学习模型的框架。
660 1
|
存储 机器学习/深度学习 SQL
图解大数据 | 分布式平台Hadoop与Map-Reduce详解
Hadoop是最基础和场景的开源分布式计算平台,ShowMeAI在本节内容中给大家讲解Hadoop相关知识。
722 0
图解大数据 | 分布式平台Hadoop与Map-Reduce详解
|
12月前
|
算法 物联网 定位技术
基于BLE的商业综合体室内定位导航系统:低功耗室内导航与反向寻车
本文介绍了基于BLE技术的商场室内定位导航系统,涵盖系统设计思路、关键技术实现及实际应用效果。系统通过部署BLE信标和利用智能手机等设备,实现精准室内定位与导航,提升消费者购物体验。关键技术包括iBeacon蓝牙定位和A*寻路算法,应用于商场导航、AR实景导航及反向寻车等功能。
433 4
|
搜索推荐 C# Windows
一款.NET开源、免费、实用的多功能原神工具箱(改善桌面端玩家的游戏体验)
一款.NET开源、免费、实用的多功能原神工具箱(改善桌面端玩家的游戏体验)
269 0
|
Windows
查看LabVIEW及各个模块和驱动的版本号
查看LabVIEW及各个模块和驱动的版本号
341 0
|
JSON 自然语言处理 搜索推荐
开发一款专属的 VSCode 代码提示插件
作为前端开发者一定用过VsCode这款利器,而其强大的插件能力无疑更是让我们深深的爱上了它。据不完全统计,VsCode插件市场中的插件数量已经超过了3万,由此可见大家的热情有多高。其中涉及到各种各样功能的插件,有主题曲相关的,有代码开发相关的,比如代码片段、Git插件、tslint等等。作为开发者,肯定用过各种各样的代码提示的插件,代表性的有TabNine、Copilot等等。今天就让我们来自己动手,开发一款专属的代码提示插件。毕竟别人的再好也是别人的, 属于自己的才是最好的。
3196 1
开发一款专属的 VSCode 代码提示插件
盒式交换机堆叠配置
盒式交换机堆叠配置
258 0
|
存储 缓存 分布式计算
Spark与云存储的集成:S3、Azure Blob Storage
Spark与云存储的集成:S3、Azure Blob Storage
|
弹性计算 运维 Kubernetes
“1小时深度解读SaaS应用系统设计”技术分享
随着云原生技术的不断完善和发展,云原生技术及架构在架构演进、技术选型、构建现代化应用等工作中产生了深刻的影响。在企业上云的趋势下,越来越多的企业和开发者开始把业务与技术向云原生演进。在技术栈选型上,企业也趋向于容器化、微服务化以及基于云化应用中间件、数据库构建应用。
5416 0
“1小时深度解读SaaS应用系统设计”技术分享
|
存储 达摩院 前端开发
ICASSP 2022 多通道多方会议转录挑战项目(M2MeT)成功举办
近日,ICASSP 2022 多通道多方会议转录挑战(M2MeT)完成了测试集评测及结果公布。本次挑战由阿里巴巴达摩院语音实验室和希尔贝壳联合举办,多位国际知名行业专家包括达摩院语音实验室负责人鄢志杰、研究员马斌,希尔贝壳CEO卜辉,希尔贝壳基金会谢磊教授,美国俄亥俄州立大学汪德亮教授,丹麦奥尔堡大学谭政华教授,上海交通大学钱彦旻教授,新加坡A*STAR资讯通信研究院高级科学家Kong Aik Lee等参与大会组织和评审。
559 0
ICASSP 2022 多通道多方会议转录挑战项目(M2MeT)成功举办