JSFiddle - React, Tailwind, and code Playground

by chuangchen

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>

    <div class="row">
      <div class="column-6 media" style="">
        The year was 1999, and the world was on the brink of a new millennium. As the clock struck midnight on December 31st, people across the globe celebrated the end of one era and the beginning of another.
      </div>
      <div class="column-6 media">
        It was a time of excitement and uncertainty, as technology was rapidly advancing and the internet was becoming increasingly popular.
      </div>
      <div class="column-6 media">
        In the midst of this digital revolution, a small group of entrepreneurs saw an opportunity to change the way we shop. They launched an online marketplace called Amazon, which quickly grew into the largest online retailer in the world. With just a few clicks, people could now buy anything they desired and have it delivered right to their doorstep.
      </div>
      <div class="column-6 media">
        The story of Amazon is a testament to the power of entrepreneurship and the impact that one idea can have on the world. As we look ahead to the future, it's clear that the digital economy will only continue to grow, and companies like Amazon will play a crucial role in shaping our lives.
      </div>
    </div>

  </body>

</html>

CSS

/* 避免每添加一个行元素就要给它加一个clearfix类 */
.row::after {
  content: " ";
  display: block;
  clear: both;
}

:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

.row {
  background: yellow; 
}

/* ＊=比较符可以匹配任意包含指定字符串的值, 但是可能会匹配以外的字符 例如column-AAA,因此实际开发中尽量设置为保留关键字 */
[class*="column-"] {
  float: left;
  background-color: red;
  border: 1px solid gray;
}

/* 处理换行后的布局问题  3/5/7等等清除左侧浮动 */
.media:nth-child(2n + 1) {
  clear: left;
}

.column-1 {
  width: 8.3333%;
}

.column-2 {
  width: 16.6667%;
}

.column-3 {
  width: 25%;
}

.column-4 {
  width: 33.3333%;
}

.column-5 {
  width: 41.6667%;
}

.column-6 {
  width: 50%;
}

.column-7 {
  width: 58.3333%;
}

.column-8 {
  width: 66.6667%;
}

.column-9 {
  width: 75%;
}

.column-10 {
  width: 83.333%;
}

.column-11 {
  width: 91.6667%;
}

.column-12 {
  width: 100%;
}