热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在两列中显示内容(各占50%),如果内容不适合,则将列移动到下一行并填充水平空间

如何解决《在两列中显示内容(各占50%),如果内容不适合,则将列移动到下一行并填充水平空间》经验,为你挑选了1个好方法。

在我的项目中,我想在两列中显示内容(每列50%),如果内容不适合,则将列移到下一行并填充水平空间。

这是两个图像,以显示我的意思。

对于短文本,将其显示在两列中:

当文本不再适合时,即任一列的宽度都在50%以上时,将第二列的内容移至下一行,以填充所有可用的水平空间。有点像这样:

只能使用CSS做到这一点吗?



1> LGSon..:

您可以使用flexboxwhite-space: nowrap

小提琴片段

堆栈片段

.wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.left,
.right {
  flex: 1 0 50%;
  background: lightgreen;
  white-space: nowrap;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}
.right {
  background: lightblue;
}
This is a longer text. This is a longer text.
This is a shorter text.
This is an even longer text. This is an even longer text.
This is a shorter text.

推荐阅读
  • 一篇文章搞定css3 3d效果
    css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]
  • Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]
  • 可能我们在看一些网页的源码时会发现自己从来没见过的属性或用法今天我就来总结一下CSS3的冷知识样式计算在CSS中也可以进行简单的计算通过calc函数可以实现这样还可以使我们的 ... [详细]
  • vue组件支持预处理语言的关键点:<stylerelstylesheetscss>.mint-swipe{hei ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 使用Jsoup解析并遍历HTML文档时,该库能够高效地生成一个清晰、规范的解析树,即使源HTML文档存在格式问题。Jsoup具备强大的容错能力,能够处理多种异常情况,如未闭合的标签等,确保解析结果的准确性和完整性。 ... [详细]
  • 一款清新的jQuery日历插件带日期的Tooltip提示543人浏览发表回复这是一款非常简单清新的jQuery日历插件,它并没有特别的日期或者时间选择功能,仅仅是展示一个简单的日历控件。这款jQu ... [详细]
  • 这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读 ... [详细]
  • CSS:body{font-size:62.5%;}为什么???在网页设计中我们经常看见body{font-size:62.5%;}这样的设置,为什么偏偏是62.5%呢?这主要是为了方便em与p ... [详细]
  • 前端实用的CSS3技巧有哪些
    本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]
  • Bootstrapfontnotloadingcorrectlyglyphicons-halflings-regular.woff2.引导字体没有正确加载符号-halflingr ... [详细]
  • 前端每日实战 2018年10月至2019年6月项目汇总(共 20 个项目)
    过往项目2018年9月份项目汇总(共26个项目)2018年8月份项目汇总(共29个项目)2018年7月份项目汇总(共29个项目)2018年6月份项目汇总(共27个项目)2018年5 ... [详细]
  • 1、给边框加上圆角及阴影,如下代码:<!DOCTYPEhtmlPUBLIC"-W3CDTDHTML4.01TransitionalEN"" ... [详细]
author-avatar
狮子_贾寒璐_759
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有