Question

当我调整顺序时，我的第二个div正在扩展。知道是什么原因造成的吗？我不确定这与我的网格有关。也许我使用％作为宽度。无论如何，我认为您可以看到我想要达到的目标。我希望第二个“通过此联系我们”在右边，而所有其他内容在左边。

<style>
 body {
 font-family: 'Oswald', sans-serif;
 }



  input {
      border-radius: 25px;
      margin-top: 7%;
      padding: 6px 30px 6px 10%;
      border: 2px solid black;
    }

    textarea {
      border: 2px solid black;
      color: solid black;
    }

    #contactHeader {
      text-align: center;
      margin-bottom: 2%;
      font-size: 50px;
    }

    .contact {
      margin: 0 auto;
      margin-top: 5%;
      justify-content: center;
      background-color: #00B4E8;
      padding: 2%;
      max-width: 70%;
      border-radius: 20px;
      margin-bottom: 5%;
      border: 2px solid black;
    }

    .contactInfo {
      display: grid;
      grid-template-columns: auto auto;
      color: solid black;
      margin: 0 auto;
      margin-top: 5%;
      margin-left: 15%;
      margin-right: 15%;
    }

    .contactTxt1 {
      display: flex;
      flex-direction: column;
    }


    .contactTxt2 {
      border: 3px solid black;
      min-width: 70%;
      padding: 2%;
      margin-left: 10%;
      background-color: white;
      border-radius: 15px;
      font-size: 12px;
      margin-right: 100%;

    }

    .RadioButtons {
      display: flex;
      flex-direction: row;
      margin: 15px 0 10px 15px;
      font-weight: 600;
    }

    .member {
       margin-left: 10px;
       margin-right: 25px;
       margin-top: 7px;
    }

    .contactTxt2Header {
      margin-top: 10px;
    }

    .contactStuff {
      font-size: 15px;
    }

    .ContactBox {
      background-color: solid black;
    }

    .SubmitButton {
      display: flex;
      flex-direction: column;
    }

    .submit {
      background-color: green;
      border: 2px solid white;
      color: white;
      border-radius: 25px;
      width: 75%;
      padding: 6px 12px;
      margin: 0 auto;
      font-size: 20px;
      text-align: center;
    }

    ::placeholder {
      color: black;
    }

@media only screen and (max-width: 600px) {

.top1 {
  margin-bottom: 2%;
}

.search {
  margin-right: 10%;
}

.SearchBar {
  height: 20px;
}

.contact {
  max-width: 97%;
  width: 97%;
}

.contactInfo {
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
  flex-direction: column;
  margin-right: 15%;
}

.ContactBox {
  width: 90%;
}

.contactTxt2 {
  border: 2px solid black;
  padding: 2%;
  margin-left: 10%;
  background-color: white;
  border-radius: 15px;
  font-size: 12px;
  width: auto;
  margin: 0 auto;
  margin-top: 2%;
}

.contactHeader {
  font-size: 18px;
}

}
 </style>



   <html>

    <div class="navigations">

   <div class="buttonNav">
      <a href="index.html"><button class="siteButton" type="onclick" 
   name="button">Home</button></a>
   </div>

   <div class="buttonNav">
    <a href="about.html"><button class="siteButton" type="onclick" 
    name="button">About</button></a>
   </div>

   <div class="buttonNav">
     <a  href="contact.html"> <button class="siteButton" type="onclick" 
    name="button">Contact</button></a>
   </div>

   <div class="buttonNav">
     <a href="exhibition.html"><button class="siteButton" type="onclick" 
   name="button">Exhibition</button></a>
   </div>

   <div class="buttonNav">
      <a href="learn.html"><button class="siteButton" type="onclick" 
  name="button">Learn</button></a>
   </div>

   <div class="buttonNav">
      <a href="shop.html"><button class="siteButton" type="onclick" 
   name="button">Shop</button></a>
   </div>
 </div>

<div class="contact">

 <h1 id="contactHeader">Contact</h1>

 <div class="contactInfo">

 <form action="youHaveAnswered.php" method="post">
 <div class="contactTxt1">
 <input class="ContactBox" type="text" name="fname" placeholder="First and 
 Middle Name"></input>
 <input class="ContactBox" type="text" name="lname" placeholder="Last Name"> 
 </input>
 <input class="ContactBox" type="email" name="email" placeholder="Email 
  Adress"></input>

 <div class="RadioButtons">
 Member:<input class="member" type="radio" name="member" value="member">
 Non-Member:<input class="member" type="radio" name="non-member" value="non- 
 member">
 </div>

 <div class="text">
  <textarea name="name" rows="20" cols="40" placeholder="Tell us what you're 
 wondering about"></textarea>
 </div>

 <div class="SubmitButton">
  <button class="submit" type="submit" name="button">Send</button>
 </div>
 </div>
 </form>

 <div class="contactTxt2">
   <h1 class="contactHeader">You could also contact us through</h1>

   <h2 class="contactTxt2Header">Phone Number</h2>
    <span class="contactStuff">1-603-413-4124</span>

   <h2 class="contactTxt2Header">Email</h2>
    <span class="contactStuff">SweeneyTodd@FleetStreet.com</span>

   <h2 class="contactTxt2Header">Address</h2>
    <span class="contactStuff">221b Baker St, London, Britain</span>

   <h2 class="contactTxt2Header">We can recieve calls from</h2>
    <span class="contactStuff">07:00AM - 04:00PM</span>
 </div>

 </div>
 </div>
 </html>

Answer 1

删除边距

.contactTxt2{
   margin-right: 100%;
}

拉伸窗口时div远远超出边界的CSS错误

1 个答案: