Question

同胞魔术师，你好！我遇到一个咒语有麻烦..

我正在使用CSS网格装饰联系人部分的表单布局。我明白fr单位允许留在框内，即使应用了空白，但在这种情况下我必须遗漏一些东西..

即使我使用form单位，

fr元素的孩子也会超过其父母的体型。它们不仅仅是我用px单位明确指定列宽，但这种方法会产生响应性。我试图明确设置网格和父母的大小 - 它也没有帮助。

请注意，元素.contact-links位于左侧，form位于桌面视图的右侧以获得响应。（它必须在移动视图中使用表格）

我对参与者表示最深切的谢意！

＆＃13;

.container {
  background-color: rgba(0, 0, 0, 0.1);
  margin: auto;
  max-width: 1170px
}


/*-------------------------------------------*\
   Contacts.css

   Contents
    - General 
    - Header
    - Row
    - Row Children

\*-------------------------------------------*/


/*-------------------------------------------*\
    General
\*-------------------------------------------*/

#contacts {
  background-color: #1f1c1c;
  font-family: 'Open Sans', sans-serif
}

#contacts .container {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 60px;
  max-width: 720px;
}


/*-------------------------------------------*\
    Header
\*-------------------------------------------*/

#contacts #contacts-header {
  color: #B5B5B5;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px
}


/*-------------------------------------------*\
    Row
\*-------------------------------------------*/

#contacts #contacts-row {
  display: grid;
  grid-template: 1fr / 148.5px 1fr;
  grid-column-gap: 40px;
  grid-template-areas: "contact-links contact-form";
}


/*-------------------------------------------*\
    Row Children
\*-------------------------------------------*/

#contacts #contact-links,
#contacts #contact-form {
  padding: 0
}

#contacts #contact-links {
  grid-area: contact-links;
  padding-bottom: 45px
}

#contacts #contact-form {
  box-sizing: border-box;
  grid-area: contact-form;
  padding-bottom: 40px;
}

@media screen and (max-width: 1200px) {
  #contacts #contacts-row {
    grid-column-gap: 15px;
  }
  #contacts .container {
    max-width: 590px;
  }
}


/*-------------------------------------------*\
   ContactForm.css

   Contents
    - General 
    - Forms
    - Error Notification
    - Text Field
    - Submit Button

\*-------------------------------------------*/


/*-------------------------------------------*\
   General
\*-------------------------------------------*/

form {
  display: grid;
  grid-template-columns: calc(33.33% - calc(24px / 3));
  grid-template-rows: 37px 1fr 32px 35px;
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-areas: "email name phone" "text text text" "error-notification error-notification submit-btn" ". . .";
  min-width: 0
}

#email {
  grid-area: email
}

#name {
  grid-area: name
}

#phone {
  grid-area: phone
}

#text {
  grid-area: text
}

#error-notification {
  grid-area: error-notification
}

#submit-btn {
  grid-area: submit-btn
}


/*-------------------------------------------*\
   Forms
\*-------------------------------------------*/

.forms {
  outline: none;
  padding: 6px 12px;
  background-color: #191616;
  border: 2px solid transparent;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  color: #999;
  transition: all .3s
}


/*-------------------------------------------*\
   Error Notification
\*-------------------------------------------*/

#error-notification {
  color: #2687ff;
  display: inline-block;
  padding: 5px 10px;
}


/*-------------------------------------------*\
   Text Field
\*-------------------------------------------*/

#text {
  background-color: #191616;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #999;
  transition: all .3s;
  font-size: 15px;
  line-height: 1.42857143;
  padding: 6px 12px;
  resize: none;
}


/*-------------------------------------------*\
   Submit Button
\*-------------------------------------------*/

#submit-btn {
  background-color: #161414;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  color: #6D6C6C;
  cursor: pointer;
  font-weight: 500;
  outline: none;
  transition: all .3s;
}

@media screen and (max-width:991px) {
  form {
    grid-template-columns: repeat(1, auto) !important;
    grid-template-areas: none !important;
  }
}


/*-------------------------------------------*\
   ContactLinks.css

\*-------------------------------------------*/

#contact-img {
  border: 6px solid #191616;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.24);
  height: auto;
  margin-bottom: 1px;
  width: 136.5px
}

#social {
  padding-left: 0
}

li {
  display: inline
}

li a>img {
  border-radius: 100%;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  height: 28px;
  margin-right: 4px;
  opacity: .8;
  width: auto;
  transition: all 300ms ease-in-out;
}

li a>img:hover {
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25), 0 3px 3px rgba(0, 0, 0, 0.22);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25), 0 3px 3px rgba(0, 0, 0, 0.22);
  opacity: 1;
  transform: scale(1.05, 1.05)
}

#social {
  margin-bottom: 1px;
  margin-left: 5px
}

#social-2 {
  display: none;
  margin-left: 4px
}

＆＃13;

<section id="contacts">
  <div class="container">
    <h3 id="contacts-header">Want to make something together?</h3>
    <div id="contacts-row">
      <form>
        <input class="forms" id="email" name="email" type="email" placeholder="Email" value="">
        <input class="forms" id="name" name="name" type="text" placeholder="Name" value="">
        <input class="forms" id="phone" name="phone" type="phone" placeholder="Phone" value="">
        <textarea class="forms" id="text" name="text" placeholder="Your message here"></textarea>
        <div id="error-notification">Error note here.</div>
        <button class="btn" id="submit-btn" type="submit" name="submit">Submit</button>
      </form>
      <div id="contact-links">
        <img id="contact-img" src="footer_img.jpg" alt="Contact me here">
        <ul id="social">
          <li>
            <a href="example.com" target="_blank" rel="noopener noreferrer">
              <img src="linkedin.png" border="0" alt="Link to LinkedIn page">
            </a>
          </li>
          <li>
            <a href="https:example.com" target="_blank" rel="noopener noreferrer">
              <img src="behance.png" border="0" alt="Link to Behance page">
            </a>
          </li>
          <li>
            <a href="example.com" target="_blank" rel="noopener noreferrer">
              <img src="blogger.png" border="0" alt="Link to Blogspot page">
            </a>
          </li>
          <li>
            <a href="example.com" target="_blank" rel="noopener noreferrer">
              <img src="skype.png" border="0" alt="Link to Skype chat">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

＆＃13;

CSS Grid元素超出其容器

0 个答案: