设置div高度等于动态宽度

最新推荐文章于 2025-06-16 20:47:56 发布

原创最新推荐文章于 2025-06-16 20:47:56 发布 · 1.5w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#响应式设计 #css

前端同时被 2 个专栏收录

38 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

博客探讨如何在响应式设计中使3个div平分屏幕宽度并保持高度与宽度一致。通过设置百分比宽度实现响应式布局，利用CSS或JavaScript动态设置高度，介绍CSS padding-top比例设置和背景图片方法。同时提出解决div与img间padding问题的思路，并提供了demo源码链接。

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

项目中有时候会遇到这个问题：一行有3个div，希望这3个div平分屏幕宽度，并且高度等于宽度。
第一个问题：平分屏幕宽度
可以对div设置百分比宽度，而不是直接用px宽度，这里用到了响应式设计的思想，可以参考这篇文章：自适应网页设计（Responsive Web Design）
第二个问题：动态设置高度和宽度一致
有两种方法，一种是用js动态设置，一种是直接用CSS设置
先看下html代码

<ul>
    <li class="container">
        <div class="dummy">
        </div>
        <div class="element">
            some text
        </div>
    </li>
    <li class="container">
        <div class="dummy">
        </div>
        <div class="element">
            some text
        </div>
    </li>
    <li class="container">
        <div class="dummy">
        </div>
        <div class="element">
            some text
        </div>
    </li>
</ul>

公用的CSS

ul,li{
            list-style: none;
        }
        * {
            margin: 0;
            padding: 0;
            outline: 0
        }
        body {
            margin: 0;
            padding: 0;
            -webkit-appearance: none;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 16px;
        }
        ul{
            margin:10px;
        }
        .container {
            display: inline-block;
            position: relative;
            width: 32%;
            text-align: center;
        }

用js动态设置

var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
$(window).resize(function() {
        var cw = $('.dummy').width();
        $('.dummy').css({'height':cw+'px'});
});

用CSS设置

 .dummy {
            padding-top: 100%; /* 1:1 aspect ratio */
            width: 100%;
            background: #333333;
        }

CSS设置padding-top的原理：Use CSS to Specify the Aspect Ratio of a Fluid Element

/———————————————————
然后尝试对图片设置高度等于动态宽度
js方法很简单，跟上面的方法基本相同

<ul>
    <li class="container">
        <img src="images/test_1.jpg"/>
        <div class="element">
            some text
        </div>
    </li>
    <li class="container">
        <img src="images/test_2.jpg"/>
        <div class="element">
            some text
        </div>
    </li>
    <li class="container">
        <img src="images/test_3.jpg"/>
        <div class="element">
            some text
        </div>
    </li>
</ul>

.container {
            display: inline-block;
            position: relative;
            width: 32%;
            text-align: center;
        }
        .container img{
            width: 100%;
            height:100%;
        }

var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
$(window).resize(function() {
        var cw = $('.dummy').width();
        $('.dummy').css({'height':cw+'px'});
});

CSS方法

<ul>
    <li class="container">
        <div class="dummy">
        </div>
        <div class="element">
            some text
        </div>
    </li>
    <li class="container">
        <div class="dummy">
        </div>
        <div class="element">
            some text
        </div>
    </li>
    <li class="container">
        <div class="dummy">
        </div>
        <div class="element">
            some text
        </div>
    </li>
</ul>

.container {
            display: inline-block;
            position: relative;
            width: 32%;
            text-align: center;
        }
.dummy{
            padding-top: 100%; /* 1:1 aspect ratio */
            width: 100%;
            background:url(images/test_3.jpg) no-repeat;
            -webkit-background-size: 100%;
            background-size: 100%;
        }