一个被吐槽的 CSS 布局问题

But 先说下前提

其实现在大部分时间我都是在做 C++ 的开发,主攻方向是 Nodejs/Chromium 的一些东西,所以已经很久没有写前端的东西了,可能会有 BUG

需求描述

请看图

css-layout.png

需求分析

应该是被吐槽的比较多的布局,但是其实不是不能实现的,想一想,无非是几个 item 宽度按照最宽的走,那其实 item 按照 display: block,container 按照 display: inline-block 是可以搞定的

然后将 items 布局从列排序改成行排序,就完成了最重要的部分,其余什么的 20px 的都很简单

代码

说了这么多,不如直接贴代码

HTML 部分没什么好说的,没有特殊之处

<!DOCTYPE html>
<!--
        Author: SpringHack - springhack@live.cn
        Last modified: 2019-03-28 23:03:43
        Filename: index.html
        Description: Created by SpringHack using vim automatically.
-->
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>SpringHack</title>
    </head>
    <body>
      <div class='parent'>
        <span class='child'>用户满意率</span>
        <span class='child'>邀评率</span>
        <span class='child'>评价率</span>
      </div>
    </body>
</html>

需求没有说明 items 数量限制,按照实际情况来讲,一般都会有上限,这里我用 less 实现,因为比较懒 Orz

html, body, * {
  border: 0;
  margin: 0;
  padding: 0;
}

.parent {
  position: relative;
  top: 100px;
  left: 100px;
  display: inline-block;
}
.child {
  border: #d3d3d3 solid;
  background: #ffffff;
  border-width: 1px 1px 1px 0px;
  display: block;
  padding: 10px 20px 10px 20px;
  text-align: center;
  box-sizing: border-box;
  -webkit-user-modify: read-write; // Just for debug in Chrome
  &:hover {
    background: #dcdaf0;
  }
  cursor: pointer;
}

// Only important part
.mixin-loop (@i) when (@i > 0) {
  .child:nth-child(0n+@{i}) {
    & when (@i = 1) {
      border-left-width: 1px;
    }
    transform: translate((@i - 1) * 100%, (@i - 1) * -100%);
  }
  .mixin-loop(@i - 1);
}

@iterations: 15; // As much as you can
.mixin-loop(@iterations);

最终效果 Output

本文链接:

https://www.dosk.win/2019/03/30/18.html
1 + 7 =
0 评论