Question

我有一个页面可以显示垂直堆叠的内容块。

我在768px下工作得很好但是在那个尺寸上我增加了一些额外的线条并且它们全部溢出了div。注意：我现在只在768px测试这个。

这是实时测试网站：http://s213258.gridserver.com/

任何帮助或想法都会很棒，谢谢!!

HTML结构：

    <section class="main-section" id="content">
  <div class="container">
    <div class="clearfix home-info-row">
      <div class="md-col md-col-5">
        <header class="section-heading">
          <h2>Timeline</h2>
        </header>
        <p class="section-sub-heading">
          The Big Moments in Les Anderson’s Life
        </p>
      </div>
      <div class="md-col md-col-7 impact-button__box">
        <a href="timeline.html" class="impact-button">
          <div>
            <span class="impact-button__title">See the life</span>
          </div>
        </a>
      </div>
    </div>
    <div class="clearfix home-info-row">
      <div class="md-col md-col-5 md-col-right">
        <header class="section-heading">
          <h2>Stories</h2>
        </header>
        <p class="section-sub-heading">
          Fond Memories from loved ones of Les
        </p>
      </div>
      <div class="md-col md-col-7 impact-button__box">
        <a href="stories.html" class="impact-button">
          <div>
            <span class="impact-button__title">Read the Stories</span>
          </div>
        </a>
      </div>
    </div>
    <div class="clearfix home-info-row">
      <div class="md-col md-col-5">
        <header class="section-heading">
          <h2>Gallery</h2>
        </header>
        <p class="section-sub-heading">
          Stunning photos from Les himself
        </p>
      </div>
      <div class="md-col md-col-7 impact-button__box">
        <a href="photos.html" class="impact-button">
          <div>
            <span class="impact-button__title">View the Photos</span>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

相对CSS：

.section-heading {
  position: relative; }
  .section-heading h2 {
    font-size: 65px;
        letter-spacing: 2.5px;
        margin-bottom: 1rem;
        font-family: 'PontiacInlineRegular', serif;
     }
    @media (min-width: 30em) {
      .section-heading h2 {
        font-size: 115px;
                margin-top: 1rem; } }
    @media (min-width: 52em) {
      .section-heading h2 {
        font-size: 115px;
                margin-top: 1rem; } }
  .section-sub-heading {
    font-size: 20px;
        letter-spacing: 2px;
        line-height: 30px;
        width: 75%;
        min-width: 280px;
    margin: 0 auto 25px auto;
        font-family: 'PontiacInlineShadow', serif;
     }
    @media (min-width: 30em) {
      .section-sub-heading {
        font-size: 30px;
                width: 55%;
                line-height: 1.25; } }
    @media (min-width: 52em) {
      .section-sub-heading {
        font-size: 30px; } }


.impact-button {
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
  max-width: 498px;
  width: 100%;
  text-align: center;
  display: block;
  color: #DAC9A8;
  padding: 25px 25px 30px;
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
    margin: 0;
    padding: 15px 0;
  text-decoration: none; }
  .impact-button.full {
    max-width: 100%; }
  @media (min-width: 30em) {
    .impact-button {
      margin-left: 0;
      margin-right: 0;
            width: 100%;
            max-width: none;
          float: none; } }
  @media (min-width: 52em) {
    .impact-button {
      margin-left: 0;
      margin-right: 0; } }
  .impact-button:hover {
    color: #AC987F; }

    .impact-button__box {
        background-color: #963C34;
        width: 100%;
    }

    .impact-button__title {
    font-size: 30px;
    font-weight: 300;
        font-family: 'PontiacInlineShadow', serif;
    line-height: 1.1;
    margin: 0;
    padding-bottom: 0;
        padding-top: 5px;
    display: block;
    position: relative; }
    @media (max-width: 52em) {
       .impact-button__text {
         font-size: 40px; } }
    @media (min-width: 52em) {
      .impact-button__title {
        font-size: 48px; } }
  .impact-button__text {
    display: block;
    font-size: 23px;
    margin-top: 30px; }
     @media (max-width: 52em) {
        .impact-button__text {
          font-size: 18px; }
      }
    .impact-button__text em, .impact-button__text a {
      text-decoration: underline;
      font-style: normal; }
    .impact-button__text a {
      display: inline-block;
      position: relative;
      z-index: 5; }
  .impact-button--download {
    box-shadow: inset 0 0 0 4px #575E70;
    padding: 15px 10px;
    text-decoration: none;
    display: inline-block;
    min-width: 300px; }
    .impact-button--download:before, .impact-button--download:after {
      border: 4px solid transparent; }
    .impact-button--download .impact-button__title {
      font-size: 25px;
      margin: 0;
      line-height: 1.1;
      padding-bottom: 10px; }
      .impact-button--download .impact-button__title em, .impact-button--download .impact-button__title a {
        position: relative;
        font-style: normal; }
        .impact-button--download .impact-button__title em:after, .impact-button--download .impact-button__title a:after {
          content: "";
          display: block;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          height: 2px;
          background: #AC987F; }
      .impact-button--download .impact-button__title:after {
        display: none; }
    .impact-button--download .impact-button__text {
      font-size: 12px;
      margin: 0; }

Answer 1

好吧，我弄清楚了。

没有不准确的高度，这是一系列具有偏移边距的盒子，这些盒子使得东西超出了盒子。

得到了一切，只需要一段时间。

内容不填充容器和溢出

1 个答案: