javascript - 如何让 div [box] 响应其中的文本
问题描述
我想要的是文本框类应该是响应式的,所以当我改变宽度时,宽度和高度将与正方形相同,并且文本会相对于它发生变化,因此文本不会出现文本框。如您所见,当您更改宽度时,文本框已经从浮动框和容器中出来了。感谢您的帮助,这意味着很多。
.container {
border: solid 1px;
display: grid;
grid-template-columns: 50% 1fr;
}
.float-box {
position: relative;
width: 50vw;
height: 75vh;
border: solid 1px;
}
.text-box {
position: absolute;
right: 10px;
margin: 20px 0;
padding: 40px;
width: 30vw !important;
overflow: hidden;
height: 50vh;
border: solid 1px black;
-webkit-box-shadow: 10px 11px 2px 3px rgb(128, 128, 128);
box-shadow: 10px 11px 2px 3px grey;
display: flex;
align-items: center;
}
.texts {
overflow: hidden;
}
.text-box p {
font-size: 1vw;
font-weight: 400;
color: grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="float-box">
<div class="text-box">
<div class="texts">
<p class="text-highlight">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore
natus magni distinctio sit eaque laudantium, nulla quos sed
architecto repellat dolore ut voluptatum atque debitis.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum,
consectetur sit! Beatae sint, nobis odit a aspernatur ab repellendus
dolorem necessitatibus voluptatums.
</p>
<span class="success"><p>Icon <h4>The best of 2020</h4></p></span>
<p class="text-highlight bigger">
Noget Info Om Virksomheden
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure,
necessitatibus.
</p>
</div>
</div>
</div>
<div class="box2"></div>
</div>
</body>
</html>
解决方案
检查它是否适合您。
.container {
border: solid 1px;
display: grid;
grid-template-columns: 50% 1fr;
}
.float-box {
position: relative;
width: 50vw;
height: 75vh;
border: solid 1px;
}
.text-box {
position: absolute;
/* right: 10px; */
/* margin: 20px 0; */
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* padding: 40px; */
width: 30vw !important;
/* overflow: hidden; */
overflow: scroll;
height: 50vh;
border: solid 1px black;
-webkit-box-shadow: 10px 11px 2px 3px rgb(128, 128, 128);
box-shadow: 10px 11px 2px 3px grey;
display: flex;
align-items: center;
}
.texts {
/* overflow: hidden; */
word-wrap: break-word;
overflow-wrap: break-word;
}
.text-box p {
font-size: 1vw;
font-weight: 400;
color: grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="float-box">
<div class="text-box">
<div class="texts">
<p class="text-highlight">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore
natus magni distinctio sit eaque laudantium, nulla quos sed
architecto repellat dolore ut voluptatum atque debitis.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum,
consectetur sit! Beatae sint, nobis odit a aspernatur ab repellendus
dolorem necessitatibus voluptatums.
</p>
<span class="success"><p>Icon <h4>The best of 2020</h4></p></span>
<p class="text-highlight bigger">
Noget Info Om Virksomheden
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure,
necessitatibus.
</p>
</div>
</div>
</div>
<div class="box2"></div>
</div>
</body>
</html>
如果您不想要可滚动的文本,只需注释掉overflow: scroll
并将其替换为overflow: hidden
inclass text-box
推荐阅读
- python - 如何正确实现 Peewee 回滚?
- python - 如何使“for”循环中的索引向前跳N
- android - Dao 类的实例未正确初始化
- api - 如何从进程ID中找到exe名称
- email - 新订单电子邮件需要发送特定的电子邮件地址
- android - 访问服务器时如何保存会话标识符并发送?
- sql - “24-OCT-19 09.33.34.000000000 AM”的日期格式是什么?
- c++ - 如何将 CUDA 函数替换为单线程 CPU 函数?
- event-sourcing - 如果我们在投影后触发事件有什么缺点?
- django-templates - Django PolygonField - 如何在地图上显示?