吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

搜索
查看: 309|回复: 42

HTML问题

[复制链接]
xuegaoxiansen 发表于 2020-6-30 11:33
40吾爱币

想实现效果
未标题-1.png



现在效果


微信截图_20200630112342.png


需要修改的代码(本身是随屏幕放大,用了之前大大推荐的vw,vh)


<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
    <style>
        .box {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center
        }
        
        .boxx {
            width: 10vw;
            height: 10vw;
            margin: 5px
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxx">
            <img src="1.png">
            <span>
                吾爱破解
               
                地表最强
            
                人的一生
                三万多天
               
            </span>
        </div>
    </div>
</body>
</html>



最佳答案

查看完整内容

把relative改成absolute或者这样 具体原理可以谷歌去

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

Culaccino 发表于 2020-6-30 11:33
xuegaoxiansen 发表于 2020-6-30 16:45
大大,我发现个奇怪的地方
就是我本身建了个div盒子加了position: absolute;属性
再套入您这个代码,.b ...

把relative改成absolute或者这样
[HTML] 纯文本查看 复制代码
	<div id="wrap">
		<div style="position: relative;height: 100%">
			<div class="box">
				<img src="1.png">
				<div class="boxx">
					<p>吾爱破解</p>
					<p>地表最强</p>
					<p>人的一生</p>
					<p>三万多天</p>
				</div>
			</div>
		</div>
	</div>

具体原理可以谷歌去
By丿安之若素 发表于 2020-6-30 11:48
本帖最后由 By丿安之若素 于 2020-6-30 11:55 编辑

嵌套错了啊,限制一下宽度。 QQ截图20200630115440.png
<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
    <style>
        .box {
            width: 100%;
            height: 100%;
            display: flex;
                        flex-wrap:wrap;
            justify-content: center;
            align-items: center
        }
        
        .boxx {
            max-width: 50%;
                        margin:20px
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxx">
            <img src="QQ截图20200630115119.png">
                </div>
                <div class="boxx">
            <span>
                吾爱破解<br>
                地表最强<br>
                人的一生<br>
                三万多天<br>
               
            </span>
        </div>
</body>
</html>
微博橙一呀 发表于 2020-6-30 11:50
By丿安之若素 发表于 2020-6-30 11:48
嵌套错了啊,限制一下宽度,不要box套boxx。
css里 box 加一个 flex-wrap:wrap

字不加nbsp;的吗人家的可是有空格的
被遗忘的路人 发表于 2020-6-30 11:55
[HTML] 纯文本查看 复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #box{
            width: 4rem;
            height: 2rem;
            overflow: hidden;
            zoom: 1;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: flex;
        }

        .img {
            width: 3rem;
        }

        .img img{
            width: 100%;
        }

        .text {
            flex: 1;
            height: 100%;
            overflow: hidden;
        }

        .text p {
            font-size: 0.2rem;
            line-height: 0.5rem;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="img">
            <img src="https://s1.ax1x.com/2020/05/18/YfkkCt.gif" alt="">
        </div>
        <div class="text">
            <p>吾爱破解</p>
            <p>地表最强</p>
            <p>人的一生</p>
            <p>三万多天</p>
        </div>
    </div>
</body>
<script>
    (function (doc, win) {
        var docEl = doc.documentElement,
            isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
            dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放
            dpr = 1,
            scale = 1 / dpr,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        docEl.dataset.dpr = dpr;
        var metaEl = doc.createElement('meta');
        metaEl.name = 'viewport';
        metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
        docEl.firstElementChild.appendChild(metaEl);
        var recalc = function () {
            var width = docEl.clientWidth;
            if (width / dpr > 1920) {
                width = 1920 * dpr;
            }
            // 乘以100,px : rem = 100 : 1
            docEl.style.fontSize = 100 * (width / 1920) + 'px';
        };
        recalc();
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
    })(document, window);
</script>
</html>

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
hqf106 + 1 + 1 我很赞同!

查看全部评分

被遗忘的路人 发表于 2020-6-30 11:56
嘻嘻    这个可以吗   响应式
kof21411 发表于 2020-6-30 11:56
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
    <style>
        .box {
            width: 100vw;
            height: 100vh;
        }
        
        .boxx {
            width: 100%;
            height: 100%;
            margin: 5px;
            display: flex;
            justify-content: center;
            align-items: center
        }
		.boxx  img{
			flex:1
		}
		.boxx  span{
			flex:1
		}
    </style>
</head>
<body>
    <div class="box">
        <div class="boxx">
            <img src="1.png">
            <span>
                吾爱破解
               
                地表最强
            
                人的一生
                三万多天
               
            </span>
        </div>
    </div>
</body>
</html>
By丿安之若素 发表于 2020-6-30 11:56
微博橙一呀 发表于 2020-6-30 11:50
字不加nbsp;的吗人家的可是有空格的

加不加空格,他这个嵌套的div都没理解呢
ab7468411 发表于 2020-6-30 12:00
应该很简单啊,你看下w3school
不负韶华 发表于 2020-6-30 12:03
<!DOCTYPE html>
<html lang="zn-cn">
        <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width,initial-scale=1">
                <title>Document</title>
                <style>
                        .box {
                                width: 100vw;
                                height: 100vh;
                                display: flex;
                                justify-content: center;
                                align-items: center
                        }

                        .boxx {
                                /* border: 2px solid blue; */
                                width: 16vw;
                                height: 15vw;
                        }

                        .boxx span p {
                                float: left;
                                font-size: 26px;
                                margin-top: 5px;
                                margin-left: 20px;
                                letter-spacing: 5px;
                                font-family: "宋体";
                        }
                </style>
        </head>
        <body>
                <div class="box">
                        <img src="1.png">
                        <div class="boxx">
                                <span>
                                        <p>吾爱破解</p>
                                        <p>地表最强</p>
                                        <p>人的一生</p>
                                        <p>三万多天</p>

                                </span>
                        </div>
                </div>
        </body>
</html>
对滴2.png
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2020-7-2 17:07

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表