html - 保持各部分之间的距离相等

Question

我想在我的部分之间保持相等的距离。我目前将 margin-bottom 设置为 20%，这在桌面 View 和移动 View 上效果很好。但是对于平板电脑，由于图像尺寸的增大，这些部分会发生碰撞。这是代码，感谢您的帮助:

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';

section {
  padding-top: 50px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 20%;
  height: 100vh;
}
section .box {
  padding: 50px;
  background-color: rgba(0, 0, 0, 0.75);
}
.section-title {
  margin-bottom: 20px;
  font-size: 22px;
  line-height: 28px;
  color: white;
}
.frame-picture {
  position: relative;
  border: 2px solid;
  border-color: rgba(255, 255, 255, 1);
  overflow: hidden;
  margin: 0 0 15px 0;
}

<div class="main">
  <!-- Home -->
  <section id="home" class="home-section">
    <div class="">

    </div>
  </section>
  <!-- About Me Section -->
  <section id="about" class="about-section">
    <div class="box">
      <h2 class="section-title">A Little About Myself</h2>
      <div class="row">
        <div class="col-md-5 col-md-push-7">
          <figure class="frame-picture">
            <img class="img-responsive" src="https://res.cloudinary.com/knaguibimages/image/upload/v1475345839/ProfilePicV2_yevnyw.jpg" alt="Karim Naguib Profile Picture">
          </figure>
        </div>
        <div class="col-md-7 col-md-pull-5">
          <p>Hello! My name's Karim Naguib, and this page was developed to showcase my projects.</p>
          <p>I graduated from the <a href="https://uwaterloo.ca/" target="_blank"> University of Waterloo</a> in 2015, with a BSc. in Management Engineering.</p>
        </div>
      </div>
    </div>
  </section>
  <!-- Portfolio Section -->
  <section id="portfolio" class="portfolio-section">
    <div class="box">
      <h2 class="section-title">My Work</h2>
    </div>
  </section>
  <!-- Contact Me Section -->
  <section id="contact" class="contact-section">
    <div class="box">
      <h2 class="section-title">Get In Touch</h2>
    </div>
  </section>

</div>

Answer 1

使用 flex 盒子。将以下 flex 容器包裹在这些部分周围:

.main {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
  margin: 40px auto;
  padding: 20px;
  background: url(http://arbectravel.com/wp-content/uploads/2015/08/aruba1.jpg)
}

并将以下规则集添加到包含图片的部分:

 flex: 0 1 auto;

祝你工作顺利。

片段

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
 body {
  color: #fff;
}
.main {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
  margin: 40px auto;
  padding: 20px;
  background: url(http://arbectravel.com/wp-content/uploads/2015/08/aruba1.jpg)
}
section {
  width: 100%;
  margin: 0 auto;
}
section .box {
  padding: 5px 20px;
  margin: 20px auto;
  background-color: rgba(0, 0, 0, 0.75);
}
.section-title {
  font-size: 22px;
  line-height: 28px;
  color: white;
}
.frame-picture {
  border: 2px solid;
  border-color: rgba(255, 255, 255, 1);
  overflow: hidden;
  margin: 0 0 15px 0;
  flex: 0 1 auto;
}

<div class="main">
  <!-- Home -->
  <section id="home" class="home-section">
    <div class="">

    </div>
  </section>
  <!-- About Me Section -->
  <section id="about" class="about-section">
    <div class="box">
      <h2 class="section-title">A Little About Myself</h2>
      <div class="row">
        <div class="col-md-5 col-md-push-7">
          <figure class="frame-picture">
            <img class="img-responsive" src="https://res.cloudinary.com/knaguibimages/image/upload/v1475345839/ProfilePicV2_yevnyw.jpg" alt="Karim Naguib Profile Picture">
          </figure>
        </div>
        <div class="col-md-7 col-md-pull-5">
          <p>Hello! My name's Karim Naguib, and this page was developed to showcase my projects.</p>
          <p>I graduated from the <a href="https://uwaterloo.ca/" target="_blank"> University of Waterloo</a> in 2015, with a BSc. in Management Engineering.</p>
        </div>
      </div>
    </div>
  </section>
  <!-- Portfolio Section -->
  <section id="portfolio" class="portfolio-section">
    <div class="box">
      <h2 class="section-title">My Work</h2>
    </div>
  </section>
  <!-- Contact Me Section -->
  <section id="contact" class="contact-section">
    <div class="box">
      <h2 class="section-title">Get In Touch</h2>
    </div>
  </section>

</div>