关于css百分比的一个问题求助

查看:65
本文介绍了关于css百分比的一个问题求助的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        .img{border:none;
            outline: none;}
    </style>
</head>
<body>
    <div style="width: 1920px;height: 6000px;overflow: hidden;">
        <div class="img img1">
            <a href="javascript:;">
                <img src="//gdp.alicdn.com/imgextra/i3/2005956389/TB2dRiSnpXXXXbSXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920"height="767"/>
            </a>
        </div>
        <div class="img img2">
            <a href="javascript:;">
                <img src="//gdp.alicdn.com/imgextra/i4/2005956389/TB2SWaWnpXXXXaUXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920"height="767"/>
            </a>
        </div>
        <div class="img img3">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i1/2005956389/TB2iUKSnpXXXXbzXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920"height="767"/>
            </a>
        </div>
        <div class="img img4">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i4/2005956389/TB2YvulnpXXXXXaXFXXXXXXXXXX_!!2005956389.gif" alt="" width="1920"height="767"/>
            </a>
        </div>
        <div class="img img5">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i1/2005956389/TB2PLGjnpXXXXXTXFXXXXXXXXXX_!!2005956389.gif" alt="" width="1920"height="767"/>
            </a>
        </div>
        <div class="img img6">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i4/2005956389/TB2jeWYnpXXXXaHXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920"height="767"/>
            </a>
        </div>
        <div class="img img7">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i1/2005956389/TB20gS3npXXXXacXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920"height="767"/>
            </a>
        </div>
        <div class="img img8">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i4/2005956389/TB234uZnpXXXXaPXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920"height="767"/>
            </a>
        </div>
    </div>
</body>
</html>

这是我的代码 在我的屏幕上是溢出的 但是我如果想自适应的话 放到淘宝里 会有一个 写百分比的div他的父元素会有一个固定的宽度限制 我看别人的淘宝的 都可以自适应 我就做不出来 请问该怎么做? 希望大家能明白我的意思

解决方案

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img,div {max-width:100%;}
        *{margin:0;padding: 0;}
        .img{border:none;
            outline: none;}
    </style>
</head>
<body>
    <div style="width: 1920px;">
        <div class="img img1">
            <a href="javascript:;">
                <img src="//gdp.alicdn.com/imgextra/i3/2005956389/TB2dRiSnpXXXXbSXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920" height="767"/>
            </a>
        </div>
        <div class="img img2">
            <a href="javascript:;">
                <img src="//gdp.alicdn.com/imgextra/i4/2005956389/TB2SWaWnpXXXXaUXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920" height="767"/>
            </a>
        </div>
        <div class="img img3">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i1/2005956389/TB2iUKSnpXXXXbzXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920" height="767"/>
            </a>
        </div>
        <div class="img img4">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i4/2005956389/TB2YvulnpXXXXXaXFXXXXXXXXXX_!!2005956389.gif" alt="" width="1920" height="767"/>
            </a>
        </div>
        <div class="img img5">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i1/2005956389/TB2PLGjnpXXXXXTXFXXXXXXXXXX_!!2005956389.gif" alt="" width="1920" height="767"/>
            </a>
        </div>
        <div class="img img6">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i4/2005956389/TB2jeWYnpXXXXaHXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920" height="767"/>
            </a>
        </div>
        <div class="img img7">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i1/2005956389/TB20gS3npXXXXacXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920" height="767"/>
            </a>
        </div>
        <div class="img img8">
            <a href="javascript:;">
             <img src="//gdp.alicdn.com/imgextra/i4/2005956389/TB234uZnpXXXXaPXXXXXXXXXXXX_!!2005956389.gif" alt="" width="1920" height="767"/>
            </a>
        </div>
    </div>
</body>
</html>

试试

这篇关于关于css百分比的一个问题求助的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆