本站消息
有人能告诉我一种方法，让这段文字不脱离 div 背景吗？
发布于2025-01-19 20:09 阅读(1011) 评论(0) 点赞(27) 收藏(5)
body {
margin:0;
}
#header {
display:flex;
max-height:50px;
}
#nav-bar {
width:50vw;
justify-content:space-around;
align-items:center;
}
.image {
width:55vw;
}
#header-img{
height: 100%;
width: 50%;
}
ul {
padding: 0;
list-style-type:none;
display:flex;
justify-content:space-around;
}
#videodiv {
width:100%;
margin-top:50px;
display:flex;
justify-content:center;
}
h3{
text-align:center;
}
#form {
margin-top:25px;
display:flex;
justify-content:center;
}
a {
color:chocolate;
text-decoration:none;
font-size:20px;
}
#container {
min-height:200px;
text-align:center;
width:60%;
margin: 0 auto;
margin-top:5em;
background-color:gray;
display:grid;
grid-template-columns:1fr 1fr ;
grid-template-rows:1fr 1fr;
grid-template-areas:
"price price"
"pay nopay";
}
#price {
grid-area:price;
font-weight:bold;
}
#nopay {
grid-area:nopay;
background-color:red;
}
#pay {
grid-area:pay;
background-color:green;
}
span {
color:yellow;
text-decoration:underline;
}
#containertwo {
margin-top:5em;
display:flex;
width:100%;
background-color:green;
flex-wrap:wrap;
height:1000px;
}
#containertwo > div {
width:60%;
height:15%;
}
#containertwo > div > span {
float:left;
}
.works1 {
background-color:#60bcc1;
}
.works2 {
background-color:#74993e;
}
.works3 {
background-color:#a07580;
}
#containertwo> div > p {
text-align:center;
float:left;
font-size:24px;
}
#containertwo> div > span {
font-size:100px;
float:left;
}<html>
<head>
</head>
<body>
<header id="header">
<div class="image">
<img id="header-img" src="https://image.ibb.co/b7LxgK/car.png">
</div>
<nav id="nav-bar">
<ul>
<li><a href="#price">Price</a></li>
<li><a href="#work">Process</a></li>
<li><a href="#location">Location</a></li>
</ul>
</nav>
</header>
<div id="videodiv">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/iEDJFjAD6kY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<h3>Subscribe to our news letter</h3>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" name="email" required placeholder="Enter your email">
<br><input id="submit" type="submit" value="Subscribe">
</form>
<div id="container">
<div id="price">
<p>The whole price of the product depends on the damage the vehicle has received and you will be informed as soon as possible about the full cost.</p>
</div>
<div id="nopay">
<p>For vehicle auto parts changing you will need to pay <span>less than 100$</span></p>
</div>
<div id="pay">
<p>To fix broken things inside of your car we will take <span>more than 100$</span> </p>
</div></div>
<div id="containertwo">
<div class="works1">
<span>1</span><p>You will arrive at the auto service.</p>
</div>
<div class="works2">
<span>2</span><p>You will need to fill out some documents in order to begin the car check.</p>
</div>
<div class="works3">
<span>3</span><p>After we've fixed your vehicle , you are going to receive a call to pick the vehicle from the service.</p>
</div>
</div>
</body>
</html>有人能解释一下为什么 .works3 上的文本超出了 div 吗？我知道我可以将 #container>div 宽度更改为 70%，这样就可以解决这个问题，但我想知道是否有更好的选择，而无需增加/减少宽度？如果在某些情况下代码片段无法正确显示，这里有一个代码笔。：
https://codepen.io/edga9966/pen/XBqarB
解决方案
只需float:left从 中删除#containertwo > div > p。如果您希望文本位于左侧，请使用text-align: left而不是text-align: center。
body {
margin: 0;
}
#header {
display: flex;
max-height: 50px;
}
#nav-bar {
width: 50vw;
justify-content: space-around;
align-items: center;
}
.image {
width: 55vw;
}
#header-img {
height: 100%;
width: 50%;
}
ul {
padding: 0;
list-style-type: none;
display: flex;
justify-content: space-around;
}
#videodiv {
width: 100%;
margin-top: 50px;
display: flex;
justify-content: center;
}
h3 {
text-align: center;
}
#form {
margin-top: 25px;
display: flex;
justify-content: center;
}
a {
color: chocolate;
text-decoration: none;
font-size: 20px;
}
#container {
min-height: 200px;
text-align: center;
width: 60%;
margin: 0 auto;
margin-top: 5em;
background-color: gray;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "price price" "pay nopay";
}
#price {
grid-area: price;
font-weight: bold;
}
#nopay {
grid-area: nopay;
background-color: red;
}
#pay {
grid-area: pay;
background-color: green;
}
span {
color: yellow;
text-decoration: underline;
}
#containertwo {
margin-top: 5em;
display: flex;
width: 100%;
background-color: green;
flex-wrap: wrap;
height: 1000px;
}
#containertwo>div {
width: 60%;
height: 15%;
}
#containertwo>div>span {
float: left;
}
.works1 {
background-color: #60bcc1;
}
.works2 {
background-color: #74993e;
}
.works3 {
background-color: #a07580;
}
#containertwo>div>p {
text-align: left;
font-size: 24px;
}
#containertwo>div>span {
font-size: 100px;
float: left;
}<html>
<head>
</head>
<body>
<header id="header">
<div class="image">
<img id="header-img" src="https://image.ibb.co/b7LxgK/car.png">
</div>
<nav id="nav-bar">
<ul>
<li><a href="#price">Price</a></li>
<li><a href="#work">Process</a></li>
<li><a href="#location">Location</a></li>
</ul>
</nav>
</header>
<div id="videodiv">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/iEDJFjAD6kY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<h3>Subscribe to our news letter</h3>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" name="email" required placeholder="Enter your email">
<br><input id="submit" type="submit" value="Subscribe">
</form>
<div id="container">
<div id="price">
<p>The whole price of the product depends on the damage the vehicle has received and you will be informed as soon as possible about the full cost.</p>
</div>
<div id="nopay">
<p>For vehicle auto parts changing you will need to pay <span>less than 100$</span></p>
</div>
<div id="pay">
<p>To fix broken things inside of your car we will take <span>more than 100$</span> </p>
</div>
</div>
<div id="containertwo">
<div class="works1">
<span>1</span>
<p>You will arrive at the auto service.</p>
</div>
<div class="works2">
<span>2</span>
<p>You will need to fill out some documents in order to begin the car check.</p>
</div>
<div class="works3">
<span>3</span>
<p>After we've fixed your vehicle , you are going to receive a call to pick the vehicle from the service.</p>
</div>
</div>
</body>
</html>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/538603/2bb3c650a269e535668d/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
27
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)