|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自适应布局</title> <style> html *{ margin: 0; padding: 0; } .parent{ display: flex; flex-wrap: wrap; justify-content: center; } .son{ flex: 0 1 300px; background-color: #fdf6e3; min-height: 200px; box-sizing: border-box; border: 3px solid #9DB783; padding: 20px; margin: 20px; } .title{ font-size: 20px; color: #c03035; } .content{ font-size: 15px; color: #323232; } </style> </head> <body> <section class="parent"> <article class="son"> <span class="title">将进酒</span> <span class="content">君不见, 黄河之水天上来, 奔流到海不复回, 君不见, 高堂明镜悲白发, 朝如青丝暮成雪</span> </article> <article class="son"> <span class="title">丹歌惊鸿</span> <span class="content">天地匆匆 惊鸿而过 路有千百个 遑遑无归 闲云逸鹤 人间红尘过 引势而流 鸿门乱局 各有各选择 乾震坎艮 坤巽离兑 定一切生克</span> </article> <article class="son"> <span class="title">将进酒</span> <span class="content">君不见, 黄河之水天上来, 奔流到海不复回, 君不见, 高堂明镜悲白发, 朝如青丝暮成雪</span> </article> <article class="son"> <span class="title">丹歌惊鸿</span> <span class="content">天地匆匆 惊鸿而过 路有千百个 遑遑无归 闲云逸鹤 人间红尘过 引势而流 鸿门乱局 各有各选择 乾震坎艮 坤巽离兑 定一切生克</span> </article> <article class="son"> <span class="title">将进酒</span> <span class="content">君不见, 黄河之水天上来, 奔流到海不复回, 君不见, 高堂明镜悲白发, 朝如青丝暮成雪</span> </article> <article class="son"> <span class="title">丹歌惊鸿</span> <span class="content">天地匆匆 惊鸿而过 路有千百个 遑遑无归 闲云逸鹤 人间红尘过 引势而流 鸿门乱局 各有各选择 乾震坎艮 坤巽离兑 定一切生克</span> </article> <article class="son"> <span class="title">将进酒</span> <span class="content">君不见, 黄河之水天上来, 奔流到海不复回, 君不见, 高堂明镜悲白发, 朝如青丝暮成雪</span> </article> <article class="son"> <span class="title">丹歌惊鸿</span> <span class="content">天地匆匆 惊鸿而过 路有千百个 遑遑无归 闲云逸鹤 人间红尘过 引势而流 鸿门乱局 各有各选择 乾震坎艮 坤巽离兑 定一切生克</span> </article> <article class="son"> <span class="title">将进酒</span> <span class="content">君不见, 黄河之水天上来, 奔流到海不复回, 君不见, 高堂明镜悲白发, 朝如青丝暮成雪</span> </article> <article class="son"> <span class="title">丹歌惊鸿</span> <span class="content">天地匆匆 惊鸿而过 路有千百个 遑遑无归 闲云逸鹤 人间红尘过 引势而流 鸿门乱局 各有各选择 乾震坎艮 坤巽离兑 定一切生克</span> </article> </section> </body> </html> |
|
公众号
