当前位置：文江博客话题详情

JavaScript 排序

任意宽度元素，在固定宽度容器内排列，使多行结果接近对齐

发布于 2022-08-29 21:26:15 字数 185 浏览 15 评论 0

如图所示，元素左对齐，排列之后尽量让每行右侧对齐，且每行尽量占满容器宽度，并保证行数最小

求达人帮忙或告知类似排序算法

排序示意图

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

吹梦到西洲 2022-09-05 21:26:15

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<style>
  .container {
    width: 300px;
    height: 300px;
    background-color: #ccc;
  }

  .clearfix:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both;
  }

  .clearfix {*zoom:1;}

  .container span {
    float: left;
    background-color: #666;
    margin: 5px;
  }

</style>
<body>


<div class="container clearfix">
    <span>阿道夫</span>
    <span>阿道夫</span>
    <span>阿道夫</span>
    <span>阿道夫奥德赛</span>
    <span>阿道夫</span>
    <span>阿道夫去外地前端</span>
    <span>阿道去外地前端去夫</span>
    <span>阿</span>
    <span>阿道夫</span>
    <span>阿道夫</span>
    <span>阿道夫</span>
    <span>阿道夫</span>
    <span>阿道夫奥德赛</span>
    <span>阿道夫</span>
    <span>阿道夫去外地前端</span>
    <span>阿道去外地前端去夫</span>
    <span>阿</span>
    <span>阿道夫</span>
  </div>


</body>
</html>

demo: http://jsfiddle.net/paddingme/5mdsn5tb/1/

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文