HTML问题

xuegaoxiansen · 发表于 2020-6-30 11:33

想实现效果

现在效果

需要修改的代码（本身是随屏幕放大，用了之前大大推荐的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>

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>

被遗忘的路人 · 发表于 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>

帐号		自动登录	找回密码
密码			注册[Register]

HTML问题

最佳答案

免费评分

个人中心