个人中心
gpt4 book ai didi

html - 谁能告诉我如何让这段文字不脱离 div 背景？

转载 作者：太空宇宙 更新时间：2023-11-04 07:04:30 24 4
gpt4 key购买 nike 

   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

最佳答案

只需从 #containertwo > div > p 中删除 float:left。如果您希望文本位于左侧，请使用 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>

关于html - 谁能告诉我如何让这段文字不脱离 div 背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51723174/

24 4 0
文章推荐： css - ionic 如何在图像旁边添加按钮
文章推荐： html - 时钟网格布局
文章推荐： php - 脚本语言如何使用套接字？
文章推荐： java - 引导 Swing 应用程序
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com