使用Flex布局在HTML中实现双行夹批效果

这篇具有很好参考价值的文章主要介绍了使用Flex布局在HTML中实现双行夹批效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

古代小说中经常有评点和批注,为了区别正文和批注,一般将批注排版成双行夹批的形式。我们知道,在Word中只需要先选择批注文字,然后通过“开始”菜单“段落”面板上字符缩放工具组里的“双行合一”命令,就可以很容易实现双行夹批效果。如下图所示:
使用Flex布局在HTML中实现双行夹批效果,html,前端
那么,如何在HTML文件中实现这样的效果呢?
HTML中,有一种显示布局叫做flex,只要定义一个布局为flex的容器,这个容器的直接子元素就成为flex元素,从而可以模拟上面的双行夹批效果。代码如下:

<!DOCTYPE html>
<html>
	<head>
		<title>Flex Words</title>
		<style type="text/css">
			.container {
				display: flex; /*使用flex布局方式*/
				flex-direction: row;/*子元素的排列方向*/
				justify-content: left; /*容器的对齐方式 */
				align-items: center;/*子元素的对齐方式,主要靠这个实现文字的垂直方向对齐*/
				flex-wrap: wrap;/*实现多行Flex容器*/
			}
			.content{
				font-size:1.4em;
			}
			.comment{
				font-size:0.5em;
			}
			span{
				display:inline;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<span class="content">以备选择为公主、郡主入学陪侍,充为才人、赞善之职。</span>
			<span class="comment" style="width:20em;">【甲戌侧】一段称功颂德,千古小说中所无。</span>
			<span class="content">二则自薛蟠父亲死后,各省中所有的买卖承局、总管、伙计人等,见薛蟠年轻不识世事,便趁时拐骗起来,二则自薛蟠父亲死后,各省中所有的买卖承局、总管、伙计人等,见薛蟠年轻不识世事,便趁时拐骗起来,二则自薛蟠父亲死后,各省中所有的买卖承局、总管、伙计人等,见薛蟠年轻不识世事,便趁时拐骗起来,</span>
			<span  class="comment" style="width:12em;">【蒙侧】我为创家立业者一哭。</span>
		</div>
		<div class="container">
			<p class="content">这是另一段正文</p>
			<p class="comment" style="width:8em;">这是一个双行显示的注释</p>
			<p class="content">这是另一段正文中的文字</p>
			<p  class="comment" style="width:6em;">双行合一实现示例</p>			
		</div>
	</body>
</html>

上述页面显示效果如下:
使用Flex布局在HTML中实现双行夹批效果,html,前端
从上图可以看出,flex布局相比于Word局限性还是很大的,首先是子元素尺寸超过容器的宽度或高度时,即使使用了flex-wrap: wrap,还是不能防止元素尺寸过大时不同的子元素被换行显示(即使子元素是行内元素span),其次是对所有需要双行显示的内容,需要针对每一块内容确定合适的宽度,否则没有理想的双行夹批显示效果。
HTML中,还可以用table元素来实现双行夹批效果,但比flex布局代码更复杂,效果也不见得更理想。看来在HTML中双行夹批效果的实现还任重道远啊!文章来源地址https://www.toymoban.com/news/detail-836417.html

到了这里,关于使用Flex布局在HTML中实现双行夹批效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 通过使用html的css样式来达到给背景色添加渐变色的效果

    这里我直接添加了两个div,并且给两个div添加了基本的css样式,有问题请私信          在演示开始之前我们先来认识一下实现渐变效果的一个属性  background: linear-gradient 这个是我们设置背景渐变色的关键属性,然后我们开始演示(这里我们通过修改第二个div)          

    2024年02月08日
    浏览(50)
  • vue中实现将html导出为word文档

    需求:将页面整成理想样式,将想要的那一部分页面导出成word,不用写模板,按照当前页面样式导出即可。(简易版) 保姆级别教程: 第一步:安装需要的依赖 第二步:给导出那部分的容器起个id名 第三步:在需要的地方引入依赖 第四步:获取dom节点myContainer并导出(我写

    2024年02月11日
    浏览(42)
  • HTML--CSS--浮动布局及定位布局

    块元素独占一行 行内元素在有多个的时候,就是从左到右排在一行 块元素包括: div , p , hr 行内元素: span , i , img float 属性: left 向左 right 向右 作用我目前看起来就是浮动元素的宽度是由内容决定的,而不是占满 效果: 但是需要注意,如果给定的宽度不够,效果会偏差:

    2024年01月19日
    浏览(59)
  • HTML — 弹性布局(1)

            对于弹性布局,首先了解其概念。弹性布局,即flex box,是一种用于在容器中进行布局的CSS技术。它使得容器内的子元素能够以灵活的方式排列、对齐、分配空间,以便应对各种屏幕尺寸和设备类型。任何一个容器都可以指定为flex布局,它提供了一种更简便、更强大

    2024年04月10日
    浏览(41)
  • html&CSS-----弹性布局

      目录 前言 什么是弹性布局  样式  学习概要 容器和项目 弹性布局的排列方式 1.横向排列(默认样式)  2.父元素容器的属性(*5) (1)主轴  代码示例:  (2)交叉轴 3.子元素项目的属性(*4)         前面我们学习了浮动布局方式,那么今天我们学习新的布局方式-

    2024年02月13日
    浏览(42)
  • HTML三大布局方式

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 使用浮动来完成左中右三栏布局 float:left----左浮动 float:right----右浮动 注意:使用float浮动时,margin:0px auto;使块元素居中将会失效。 代码示例 当我们给div3也加上一个浮动属性时 这时我们可以看到,整个

    2024年02月05日
    浏览(45)
  • HTML区块、布局

    HTML区块: HTML可以通过div 和 span将元素组合起来。大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始、结束;内联元素在显示时通常不会以新行开始。 HTMLdiv元素是块级元素,它可用于组合其他的HTML元素的容器。div元素没有特定的含

    2024年02月05日
    浏览(29)
  • HTML新增布局标签

    header: 标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。 footer:作为页面的页脚时,一般包含了版权、相关文件和链接。 nav:是一个可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部

    2024年02月13日
    浏览(35)
  • 如何在 Angular 中使用 Flex 布局

    介绍 Flex Layout 是一个组件引擎,允许您使用 CSS Flexbox 创建页面布局,并提供一组指令供您在模板中使用。 该库是用纯 TypeScript 编写的,因此不需要外部样式表。它还提供了一种在不同断点上指定不同指令以创建响应式布局的方法。 在本教程中,您将构建一个示例 Angular 应用

    2024年02月19日
    浏览(46)
  • VUE框架中实现HTML页面(局部)内容转PDF下载

    有一朋友想把网页内容变成PDF下载下来。问我有没有好办法。 这还真巧了,咱公司也有这个需求,就是网页生成合同,然后可以直接打印合同内容。最早吧,就是可以直接打印就好了。 当时为解决完美打印的问题,挺费劲的,当时第三方插件还有BUG(当然把解决放给发给作

    2023年04月14日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包