弹性盒子异形布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div class="container"> <div class="column"> <div class="content"> <div class="content_img"> <div class="content_tag">五一</div> <img src="https://picsum.photos/400/600.webp?r=1" alt="" /> </div> <div class="content_img"> <div class="content_tag">劳动节</div> <img src="https://picsum.photos/400/400.webp?r=01" alt="" /> </div> </div> </div> <div class="column"> <div class="content"> <div class="content_img"> <div class="content_tag">五一</div> <img src="https://picsum.photos/400/400?r=2" alt="" /> </div> <div class="content_img"> <div class="content_tag">劳动节</div> <img src="https://picsum.photos/400/600?r=02" alt="" /> </div> </div> </div> <div class="column"> <div class="content"> <div class="content_img"> <div class="content_tag">五一</div> <img src="https://picsum.photos/400/400?r=3" alt="" /> </div> <div class="content_img"> <div class="content_tag">背景</div> <img src="https://picsum.photos/400/400?r=03" alt="" /> </div> </div> </div> <div class="column"> <div class="content"> <div class="content_img"> <div class="content_tag">背景</div> <img src="https://picsum.photos/400/600?r=4" alt="" /> </div> <div class="content_img"> <div class="content_tag">背景</div> <img src="https://picsum.photos/400/400?r=04" alt="" /> </div> </div> </div> <div class="column"> <div class="content"> <div class="content_img"> <div class="content_tag">五一</div> <img src="https://picsum.photos/400/600?r=5" alt="" /> </div> <div class="content_img"> <div class="content_tag">背景</div> <img src="https://picsum.photos/400/400?r=05" alt="" /> </div> </div> </div> <div class="column"> <div class="content"> <div class="content_img"> <div class="content_tag">背景</div> <img src="https://picsum.photos/400/400?r=6" alt="" /> </div> <div class="content_img"> <div class="content_tag">背景</div> <img src="https://picsum.photos/400/400?r=06" alt="" /> </div> </div> </div> <div class="column"> <div class="content"> <div class="content_img"> <div class="content_tag">背景</div> <img src="https://picsum.photos/400/400?r=7" alt="" /> </div> <div class="content_img"> <div class="content_tag">背景</div> <img src="https://picsum.photos/400/600?r=07" alt="" /> </div> </div> </div> <div class="column"> <div class="content"> <div class="content_img"> <div class="content_tag">背景</div> <img src="https://picsum.photos/400/600?r=8" alt="" /> </div> <div class="content_img"> <div class="content_tag">五一</div> <img src="https://picsum.photos/400/400?r=08" alt="" /> </div> </div> </div> </div> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 90%; margin: 2em auto; display: flex; justify-content: space-between; gap: 20px; } .column { flex: 1 1 0; display: flex; align-items: center; } .content { display: flex; flex-direction: column; gap: 20px; } .content img { width: 100%; box-shadow: 0 0 3px #fff; border-radius: 5px; cursor: pointer; transition: transform 0.3s ease; } .content img:hover { transform: scale(1.1); /* 鼠标悬停时放大1.1倍 */ } .content_img { position: relative; } .content_tag { position: absolute; right: 6px; top: 6px; background: linear-gradient(128deg, #ff5b15, #ff5967); color: #fff; border-radius: 2px 10px; padding: 0 6px; height: 20px; font-size: 12px; display: flex; align-items: center; z-index: 1; cursor: pointer; }
本文来自博客园,作者:小珍珠在河里敲代码,转载请注明原文链接:https://www.cnblogs.com/Jansens520/p/18134015