div高度以宽度为基础

最新推荐文章于 2023-01-09 09:13:14 发布

sbonesjzrw

最新推荐文章于 2023-01-09 09:13:14 发布

阅读量301

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS技巧与心得

本文链接：https://blog.youkuaiyun.com/sbonesjzrw/article/details/83796768

CSS技巧与心得专栏收录该内容

1 篇文章

订阅专栏

博客探讨了如何在网页布局中，通过CSS使div的高度根据其宽度动态调整。利用百分比宽度、padding-bottom和绝对定位，实现了图片列表中图片宽高比例保持一致的效果。这种方法在ul宽度不固定，需要li按比例缩放时适用，但处理li间距时存在局限，如边距增大导致右侧空白增加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div高度以宽度为基础

问题描述:例如网页常见的图片列表,当屏幕宽度(ul宽度)不固定时,子项(li宽度)也随着改变.因此,图片高度也应跟随改变.
方法:
(1) 为li设置宽度(百分比),假如一行4个,设置为25%.
(2) 设置 padding-bottom(或者padding-top) 为 25%,则 li宽高相等,为 12.5% 则高为宽的一半.(注意:并不是设置了高度),绝对定位.
(3) li 内另新建 div 来放置内容,相对定位,宽高100%.

小结

用到的知识点:
1. 绝对定位 + 相对定位
2. padding-top 来实现宽高比例
3. 为 .child 设置上&右边框,并用伪类选择符来消除ul四周的边框颜色来模拟 li 之间的边距
4. 无法精确实现边距效果,边距越大,右边空白越大.

代码

<div class="wrap">
   <div class="inner">
       <ul>
           <li><div class="child"></div></li>
           <li><div class="child"></div></li>
           <li><div class="child"></div></li>
           <li><div class="child"></div></li>
           <li><div class="child"></div></li>
           <li><div class="child"></div></li>
           <li><div class="child"></div></li>
           <li><div class="child"></div></li>
           <li><div class="child"></div></li>
           <li><div class="child"></div></li>
           <li><div class="child"></div></li>
       </ul>
   </div>
</div>

.inner {
    width: 600px;
    margin: 0 auto;
}
ul {
    list-style: none;
    overflow: hidden;
    padding: 0;
    border: 1px solid red;
}
li {
    position: relative;
    width: 25%;
    padding-bottom: 12.5%;
    float: left;
    box-sizing: border-box;
    margin-left: -4px;
    margin-top: -4px;
}
.child {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: pink;
    border-left: 4px solid #007acc;
    border-top: 4px solid #007acc;
    border-bottom: #fff;
}
/* 上部4个 */
li:nth-child(-n+4) .child {
    border-top-color: #fff;
}
/* 所有左边 */
li:nth-child(4n+1) .child {
    border-left-color: #fff;
}
/* 所有右边 + 最后一个 */
li:nth-child(4n) .child,
li:last-child .child {
    border-right-color: #fff;
}

优劣势

适合 ul 宽度不定,li 宽高按比例显示时
难以处理 li 之间的距离.以上例子,原理是给 .child 设置了上&左边框颜色(如果为白色,则后面的li:nth-child等样式可以省略)来实现视觉边距效果.如图
边距为1px时,最右边有 4X1 px空白

边距为4px时,最右边有 4X4 px空白