时间戳

首页 > 解决方案 > CSS 媒体查询和弹性方向

html - CSS 媒体查询和弹性方向

问题描述

我正在学习 Udemy 的 Traversy 课程，我学习 HTML CSS 还不到一个月，所以是个新手。因此，在课程的一部分中，他让我们做一个网站，在最后几集中，他解释了如何让它对设备做出响应。

这是html上有问题的部分：

  <!-- Section: Contact -->
  <section id="contact">
    <div class="contact-form bg-primary p-2">
      <h2 class="m-heading">Contact Us</h2>
      <p>Please use the form below to contact us</p>
      <form action="">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" name="name" id="name" placeholder="Enter Name">
        </div>
        <div class="form-group">
          <label for="email">E-mail</label>
          <input type="email" name="email" id="email" placeholder="Enter E-mail">
        </div>
        <div class="form-group">
          <label for="phone">Phone Number</label>
          <input type="text" name="phone" id="phone" placeholder="Enter Phone Number">
        </div>
        <div class="form-group">
          <label for="message">Message</label>
          <textarea name="message" id="message" placeholder="Enter Message"></textarea>
        </div>
        <input type="sumbit" value="Send" class="btn btn-dark">
      </form>


    </div>
    <div class="map"></div>
  </section>

这就是我们在主 css 文件上所做的：

/* Section: Contact */

#contact {
  display: flex;
}

#contact .map, #contact .contact-form {
  flex: 1;
}

#contact .contact-form .form-group {
  margin: 0.75rem;

}

#contact .contact-form label {
  display: block;
}

#contact .contact-form input, 
#contact .contact-form textarea {
  width: 100%;
  padding: 0.5rem;

}

我们必须将地图放在移动 css 表上的联系表下，但是，简单地说，只有当他在计算机上完成时它才有效。在我的地图上消失了 XD：

#contact {
    flex-direction: column;
  } 


  #contact .map {

    height: 200px;

  }

我试图解决方法：

  #contact {
    flex-wrap: wrap;
  }

  #contact .contact-form {
    display: block;
  }

  #contact .map {
    display: block;

  }

但同样的事情发生了。假设我还不足以理解正在发生的事情，更不用说自己修复它了 XD

标签： htmlcssflexbox

解决方案

只需添加：

#contact {
    display: block;
    flex-direction: column;
}

推荐阅读