html块左右排列,html – 如何均匀地排列多个内嵌块元素?

我最近读了一个非常聪明的技巧来完成你所要求的工作。

简而言之,你只需要使用text-align:justify;在容器元素上实现这一点,结合一个额外的不可见块。

这是因为内联块元素被视为文本内容的一部分,每个元素实际上是单个单词。

使用对齐方式将展开文本中的单词,以便它们填充元素的整个宽度,并在单词之间增加空格。对于内联块元素,这意味着它们之间具有均匀间隔。

最后我提到一个额外的看不见的块。这是必需的,因为正常的text-align:对齐不会证明最后一行文本。对于正常文本,这正是你想要的,但是为了对齐内嵌框框,你希望它们都对齐。

解决方案是将额外的不可见但100%的宽度元素添加到内联块元素列表的末尾。这将成为文本的最后一行,因此,正当的技术将适用于其余的块。

您可以使用:after pseudo-selector来创建不可见元素,而无需修改标记。

[编辑]

查看您添加到该问题的图片后,最后一次更新。 (我没有一个更好的答案,但一些额外的想法可能是有用的)。

理想情况下,您需要的是一个最后一行选择器。然后你可以文本对齐:对齐主文本和text-align:居中的最后一行。那会做你想要的

可悲的是,最后一行不是一个有效的选择器((第一行是但不是最后一行),所以这是想法的结束。

更有希望的思想是text-align-last,它作为一个特征确实存在。这可以完全符合你想要的:

text-align:justify;

text-align-last:center;

完善。

除非它是非标准的,并且浏览器支持非常有限。

我认为最后的手段可能是您的选择,如果您只能支持部分浏览器支持。至少会得到你想要的一些用户。但这并不是一个明智的做法。

我的直觉是,尽可能接近你要得到的。非常贴近您想要的,但不完全相同。我希望我被证明是错误的,但我会感到惊讶。太糟糕了,因为我似乎是一个完美的逻辑的事情要做。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/419948.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

org.hibernate.MappingException: Could not determine type for: java.util.List, at table: user, for...

异常详情: Caused by: org.hibernate.MappingException: Could not determine type for: java.util.List, at table: ss_user, for columns: [org.hibernate.mapping.Column(roles)] at org.hibernate.mapping.SimpleValue.getType(SimpleValue.java:336) ~[hib…

计算机主机机箱面板指示灯,电脑主机指示灯不亮了是什么原因

公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解。话题:电脑主机指示灯不亮了是什么原因?回答:是指示灯坏了。或者是主机主板出了问题。参考回答:绿灯不亮是电源问题红灯不亮是硬盘或者…

html中水印影响文字复制,HTML中文字水印的清除方法_HTML教程

HTML中文字水印的清除方法我们在浏览某些网站的时候,看到不错的网页可能就想把上面的内容给复制下来,但是有的网站就是为了防止别人复制,而在每段文字的结尾处增加了干扰码——与背景颜色相同的文字。清除文字水印的方法比较多,主…

影响中国历史的十篇政治美文

转载于:https://www.cnblogs.com/yymn/p/4488728.html

什么是计算机网络教学反思,《计算机网络实训之常用的网络工具》教学反思

《计算机网络实训之常用的网络工具》教学反思常用的网络工具是网络管理员必须要掌握好的内容,本实验在学习完相关理论知识的基础上,让学生动手实践,亲自试验常用网络工具的使用。因为直观明了,马上见效,学生有了即时体…

C++11: final与override

C11中增加了final与override关键字&#xff0c;貌似是从Java语言中借鉴而来&#xff0c;用途也一样。看例子代码&#xff1a; 01.#include <iostream>02.03.using namespace std;04.05./* use final on a class to prevent inheriting; compilation error */06.class A /…

用计算机打字英语单词,常用计算机专业英语词汇-前401-500单词

常用计算机专业英语词汇-前401-500单词贡献者&#xff1a;邓鹏类别&#xff1a;中英混合 时间&#xff1a;2020-10-28 16:48:34 收藏数&#xff1a;2 评分&#xff1a;0返回上页举报此文章请选择举报理由&#xff1a;广告/谣言/欺诈政治敏感色情/违法信息垃圾文章其他收藏到我的…

java 文件的编码 问题

package com.io;public class Encodedemo {public static void main(String[] args)throws Exception{// TODO Auto-generated method stubString s "中国ABC";byte[] bytes1 s.getBytes();//转换成字节序列用的是项目默认的字节编码for(byte b:bytes1){//把字节转换…

定期定量采购_?采购计划员必备:各种物料采购计划与订单制定的技巧与方法...

采购与供应链全套资料包点击这里领取领取01采购计划管理planl1、制订采购计划的目的采购计划是企业根据市场供求情况、企业的生产经营能力和物料消耗规律等&#xff0c;对计划期内物料和其他物品的采购管理活动所作的预见性安排和部署。采购计划主要是确定采购的数量、时间和方…

采用计算机辅助电话调查,计算机辅助电话调查(CATI)-实验.pdf

高等院校统计学实验课系列教程( )计算机辅助电话调查 &#xff23;&#xff21;&#xff34;&#xff29; 实验凌 洁 主编上海财经大学出版社( )图书在版编目 &#xff23;&#xff29;&#xff30; 数据( ) &#xff0f; &#xff1a;计算机辅助电话调查 实验 凌洁主编 上海 上…

python rgb转lab,使用python转换图像RGB- Lab

What is the preferred way of doing the conversion using PIL/Numpy/SciPy today?解决方案Since 2010 when the linked question was asked the corresponding code moved from scipy to a separate toolkit:http://scikit-image.org/So heres the code I was actually look…

angular html清除元素,在Angular js中单击时删除HTML元素

这是我的指示.在身体上显示一个Div.app.directive("autosuggest",function($rootScope) {return {scope: {doneFlag : "",groupFlag : "",inviteesFlag : "",init: &},templateUrl : "title.html",link: function(scope…

科研找到属于自己的思想

转载于:https://www.cnblogs.com/yymn/p/4495400.html

kafka内存不断增加_分布式发布订阅消息系统Kafka 为什么快

Kafka 为什么能那么快 | Kafka高效读写数据的原因无论 kafka 作为 MQ 也好&#xff0c;作为存储层也罢&#xff0c;无非就是两个功能(好简单的样子)&#xff0c;一是 Producer 生产的数据存到 broker&#xff0c;二是 Consumer 从 broker 读取数据。那 Kafka 的快也就体现在读写…

计算机网络crc校验实验报告,CRC校验实现-实验报告(附主要实现代码)

计算机网络实验报告班级&#xff1a;03计算机B班实验名称&#xff1a;CRC校验实现姓名&#xff1a;kikikind学号&#xff1a;086指导老师&#xff1a;何怀文日期&#xff1a;2006-4-221&#xff0e;学习CRC循环冗余检验原理2&#xff0e;掌握实现方法WindowXpsp2 , VC 6.0/MFC三…

【APIO2015】完跪记

APIO2015 这次完美跪了&#xff0c; 什么牌都没有拿到 Day -1 第一天早上5点起床吃了个饭去赶飞机和其他中学的人回合了&#xff0c;在车上复习了一下后缀数组&#xff0c;一边复习&#xff0c;一边听歌&#xff0c;结果最后还是挂了。。只能跪拜大神了。下午到了北京南开的人…

前端学习(1477):计算属性文档分析

当数据的逻辑很复杂的时候 下载计算属性中

万能点位图软件_红色网格衣+很多漂亮的花边像素图,绣手帕花边的十字绣图...

下雨天手工——万能像素图十字绣刺绣&#xff0c;珠绣拼豆豆&#xff0c;钩针棒针提花&#xff0c;手工万能图解&#xff0c;点击文字&#xff0c;进入相应文章。【像素图1~100期大合集】【2019像素图大合集】【像素图&#xff0c;人见人爱的用法合集&#xff01;】【钩针像素毯…