为什么文字会压低图片？

时间：2016-09-14 04:01:22

标签： javascript jquery html css

我正致力于网站的响应能力，并出于某种原因进行了＃34;照片编辑＆＃34;文字正在推猫照片。我希望所有文本都在左侧，并允许照片很好地堆叠。要查看问题，请以600px宽度视口查看此网站！在此处查看网站https://ivanbarr.github.io/photostory/ 

      <body>
    <div class="wrapper">
      <!--NAV-->
      <nav>
        <div class="menu-icon">
          <img src="images/menu-icon.png">
        </div>
        <img class="logo" src="images/logo.png" alt="Photobook">
        <img class="share" src="images/share.png">
        <div class="phone">
          +11 258 364 1767
        </div>
      </nav>
      <!--MENU-->
      <div class="menu">
        <ul>
          <li><a href="#advantage">Why PhotoBook?</a></li>
          <li><a href="#photobooks">PhotoBooks</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
          <li><a href="#terms">Terms</a></li>
        </ul>
      </div>

      <!--Banner-->
      <div class="banner">
        <h1>CREATE YOUR OWN<br/> PHOTOSTORY</h1>
        <h3>Make your photobook online</h3>
        <div class="button">MAKE YOUR PHOTOBOOK</div>
      </div><!--button-->

    <div class="steps"><!--Steps-->
      <div class="circles">
          <div class="cloud circle">
          </div><!--Cloud-->
          <div class="dashed-line">
          </div>
          <div class="screen circle">
          </div><!--Screen-->
          <div class="dashed-line">
          </div>
          <div class="hand circle">
          </div><!--Hand-->
          <div class="dashed-line">
          </div>
          <div class="hand-truck circle">
          </div><!--Hand Truck-->
      </div><!--circles-->

      <div class="captions">
        <p>Download<br/>photos</p>
        <p>Design your<br/>photobook</p>
        <p>Pay<br/>for service</p>
        <p class="margin-fix">Get your<br/>photobook</p>
      </div>
    </div><!--Steps-->

    <!--Advantage-->
    <div class="advantage">
      <a name="advantage"></a>
      <h1>ADVANTAGE</h1>
        <div class="adv-desc">
          <h3>Import photos <br/>from your social networks</h3>
          <p>Lorem ipsum dolor sit amet, consectetur<br/> adipisicing elit, sed do eiusmod tempor<br/> incididunt modi tempora</p>
        </div><!--adv-desc-->
        <div class="social white-circle">
        </div><!--Social-->

        <div class="adv-desc">
          <h3>Photo Editing</h3>
          <p>Lorem ipsum dolor sit amet, consectetur <br/>adipisicing elit, sed do eiusmod tempor<br/> incididunt ut labore et dolore magna<br/> aliqua. Ora incidunt ut labore.</p>
        </div><!--adv-desc-->
        <div class="social">
          <img src="images/cat.png">
        </div><!--Social-->

        <div class="adv-desc">
          <h3>Templates</h3>
          <p>Lorem ipsum dolor sit amet, consectetur<br/>adipisicing. Ut enim ad minim, nostrud<br/> exercitation ullamco laboris nisi ut<br/> aliquip ex commodo.</p>
        </div><!--adv-desc-->
        <div class="social">
          <img src="images/templates.png">
        </div><!--Social-->
        <div class="make-your">
          <p>MAKE YOUR PHOTOBOOK</p>
        </div><!--make your photobook-->
    </div><!--Advantage-->
    <div class="ready-solutions">
      <a name="photobooks"></a>
      <h1>Ready<br/>Solutions</h1>

      <div class="light-book">
        <a name="lightbook"></a>
        <h2>LightBook</h2>
        <div class="content">
          <ul>
            <li>15x10 cm</li>
            <li>12 pages</li>
            <li>binding on the clip</li>
          </ul>
          <div class="price">
           <h3>$129</h3>
        </div><!--price-->
        </div><!--content-->
        <p>Make your LightBook</p>
      </div><!--light-book-->

      <div class="best-seller">
        <p>BESTSELLER</p>
      </div><!--Best-seller-->
      <div class="classic-book">
        <a name="classicbook"></a>
        <h2>ClassicBook</h2>
        <div class="content">
          <ul>
            <li>30x21 cm</li>
            <li>36 pages</li>
            <li>binding on the clip</li>
            <li>fabric cover</li>
          </ul>
          <div class="price">
          <h3>$239</h3>
        </div><!--price-->
        </div><!--content-->
        <p>Make your ClassBook</p>
      </div><!--classic-book-->
      <div class="premium-book">
        <a name="premiumbook"></a>
        <h2>PremiumBook</h2>
        <div class="content">
          <ul>
            <li>42x50 cm</li>
            <li>50 pages</li>
            <li>hardcover</li>
            <li>leather cover</li>
            <li>free shipping</li>
          </ul>
          <div class="price">
          <h3>$759</h3>
        </div><!--price-->
        </div><!--content-->
        <p>Make your PremiumBook</p>
      </div><!--premium-book-->
    </div><!--ready-solutoins-->
    <div class="testimonials">
      <a name="testimonials"></a>
      <h1>TESTIMONIALS</h1>
      <img class="profile-pic" src="images/profile-pic.png">
        <div class="bio">
          <h3>John Doe</h3>
          <p>Wedding photographer</p>
        </div><!--bio-->
      <div class="description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br/> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <br/>veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <br/>commodo consequat.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore<br/> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,<br/> sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
      </div><!--description-->
      <div class="next-testimonial">
        <p>Next testimonial</p>
        <img src="images/arrow.png">
      </div><!--Next Testimonial-->
      <div class="button">MAKE YOUR PHOTOBOOK</div>
    </div><!--button-->
    </div><!--testimonials-->
    <div class="info">
      <a name="terms"></a>
      <div class="box">
        <div class="box-title">
          <p>Terms</p>
        </div><!--box-title-->
        <div class="box-content">
          <p>Lorem ipsum dolor sit amet, <br/>consectetur adipisicing elit, sed <br/>do eiusmod tempor.</p>
          <p>Duis aute irure dolor in<br/> reprehenderit in voluptate velit <br/>esse cillum dolore eu fugiat <br/>nulla.</p>
        </div><!--box-content-->
      </div><!--box-->
      <div class="box">
        <div class="box-title">
          <p>Payment</p>
        </div><!--box-title-->
        <div class="box-content payment">
          <p>Payment methods:</p>
          <ul>
            <li>VISA</li>
            <li>MasterCard</li>
            <li>PayPal</li>
            <li class="margin-bottom">American Express</li>
          </ul>
        </div><!--box-content-->
      </div><!--box-->
      <div class="box">
        <div class="box-title">
          <p>Shipping</p>
        </div><!--box-title-->
        <div class="box-content margin-bottom">
          <p>Lorem ipsum dolor sit amet,<br/> consectetur adipisicing elit, sed<br/> do eiusmod tempor incididunt ut<br/> labore et dolore magna aliqua.</p>
          <p>Free shipping for<br/> PremiumBook</p>
        </div><!--box-content-->
      </div><!--box-->
      <div class="make-your button-info">
        <p>MAKE YOUR PHOTOBOOK</p>
      </div><!--make your photobook-->
    </div><!--info-->
    <footer>
      <div class="nav-wrapper">
        <div class="nav nav-1">
          <ul>
            <li>About us</li>
            <li>Careers</li>
            <li>Help</li>
            <li>Press</li>
          </ul>
        </div><!--nav 1-->
        <div class="nav nav-2">
          <ul>
            <li><a href="#terms">Terms</a></li>
            <li><a href="#terms">Payment</a></li>
            <li><a href="#terms">Shipping</a></li>
            <li>Contact</li>
          </ul>
        </div><!--nav 1-->
        <div class="nav nav-3">
          <ul>
            <li><a href="#lightbook">LightBook</a></li>
            <li><a href="#classicbook">ClassicBook</a></li>
            <li><a href="#premiumbook">PremiumBook</a></li>
          </ul>
        </div><!--nav 1-->
        <div class="nav social-footer">
          <img src="images/facebook.jpg">
          <img src="images/blogger.jpg">
          <img src="images/instagram.jpg">
          <img class="asanov" src="images/asanov.png">
        </div><!--nav 1-->
      </div><!--nav wrapper-->
        <p class="copyright">&copy;IvanBar 2016</p>
    </footer>
  </div><!--wrapper-->
    <script type="text/javascript" src="javascript/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="javascript/javascript.js"></script>
 </body>
</html>

移动版的样式

/* NAV */
.wrapper{
  overflow: hidden;
}
nav{
  max-width: 1520px;
  background-color: #ffffff;
  overflow: hidden;
}

.menu-icon{
  display: inline-block;
  padding: 15px 15px 10px 15px;
  cursor: pointer;
}

.logo{

}

.share{
  float: right;
  padding: 10px;

}

.phone{
  display: none;
}

/* MENU */

.menu{
  text-align: center;
  line-height: 35px;
  height: 145px;
  display: none;
}

.menu li{
  list-style-type: none;
}

.menu li:hover{
  border: solid black 1px;
  margin-bottom: -1px;
}

.menu li a{
  text-decoration: none;
}
.menu li a:visited{
  color: black;
}

/* Banner */

.banner{
  background-image: url("../images/banner-bg.jpg");
  background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  text-align: center;
  height: 220px;
}

.banner h1{
  padding: 15px 0 20px 0;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  letter-spacing: 2px;
  line-height: 25px;
  font-size: 1.4em;
}

.banner h3{
  display: none;
}

.button{
  border: solid black 1px;
  background: transparent;
  width: 200px;
  padding: 10px;
  margin: 0 auto;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: .90em;
  cursor: pointer;
}

.button:hover{
  text-decoration: underline;
}

/* STEPS */

.cloud{
    background-image: url("../images/cloud.png");
}

.screen{
    background-image: url("../images/screen.png");
}

.hand{
    background-image: url("../images/hand.png");
}

.hand-truck{
    background-image: url("../images/hand-truck.png");
}
.circles{
  width: 140px;
  float: right;
  margin-right: 10px;
  margin-top: 30px;
}
.circle{
  width: 130px;
  height: 130px;
  border-radius: 100px;
  background-color: white;
  background-repeat:no-repeat;
  -webkit-background-size: 50%;
  -moz-background-size: 50%;
  -o-background-size: 50%;
  background-size: 50%;
  background-position: center;
  border: solid #ffd200 5px;

}

.captions{
  width: 160px;
}

.captions p{
  margin-bottom: 150px;
  display: block;
  position: relative;
  top: 70px;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  text-align: center;
  font-size: 1.3em;
}

.dashed-line{
  width: 0;
  height: 40px;
  border: solid #ffd200 2px;
  border-style: dashed;
  margin: 0 auto;
}

/* Advantage */

.advantage{
  background-color: #f3f0e7;
}

.advantage h1{
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  padding-top: 20px;
  padding-bottom: 40px;
  font-size: 1.5em;
  letter-spacing: 10px;
}

.white-circle{
  height: 267px;
  width: 267px;
  border-radius: 133px;
  background-color: white;
  background-image: url("../images/social.png");
  background-repeat:no-repeat;
  -webkit-background-size: 50%;
  -moz-background-size: 50%;
  -o-background-size: 50%;
  background-size: 80%;
  background-position: center;
}
.social img{
  display: block;
  margin: 0 auto;
}
.social{
  margin: 0 auto;
  margin-bottom: 30px;
}
.advantage{
  overflow: hidden;
}
.advantage h3{
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  font-size: 1.5em;
}

.advantage p{
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
  font-size: 0.8em;
  line-height: 18px;
  color: #8c8c8c;
}

.make-your{
  width: 240px;
  background-color: #e11a27;
  border-radius: 10px;
  margin: 0 auto;
  cursor: pointer;
}
.make-your:hover{
  background-color: #a0131c;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
}

.make-your p{
  font-size: 0.8em;
  font-family: 'Open Sans', sans-serif;
  color: white;
  padding: 15px;
  text-align: center;
}

/* Ready Solutions */

.ready-solutions h1{
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 1.7em;
  letter-spacing: 10px;
  line-height: 30px;
}
.light-book, .classic-book, .premium-book{
  width: 280px;
  height: 400px;
  background-color: #ffd200;
  margin: 30px auto;
  border-radius: 10px;
}

.light-book{
  margin-bottom: 18px;
}

.classic-book{
  margin-top: 0;
}

.best-seller{
  width: 150px;
  margin: 0 auto;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 25px solid #ffd200;;
}

.ready-solutions p{
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  font-size: 1.5em;
  padding-top: 15px;
}

.best-seller p{
  text-align: center;
  position: relative;
  bottom: -25px;
  color: #e11a27;
  font-weight: bold;
  font-size: 1.1em;
  font-family: 'Ropa Sans', sans-serif;
  letter-spacing: 4px;

}

.ready-solutions h2{
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  font-weight: lighter;
  padding-top: 35px;
}

.content{
  width: 250px;
  height: 240px;
  background-color: white;
  margin: 0 auto;
  margin-top: 40px;
  position: relative;
}

.content ul{
  padding: 10px 0 0 15px;
}

.content li{
  padding-bottom: 10px;
  padding-left: 30px;
  list-style: none;
  background-image: url("../images/check.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.price h3{
  line-height: 100px;
  text-align: center;
  font-size: 3em;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
}

.price{
  width: 252px;
  height: 100px;
  position: absolute;
  bottom: 0;
}

/* Testimonials */

.testimonials{
  background-color: #f7f0e6;
  overflow: hidden;
}

.testimonials h1{
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: lighter;
  padding-top: 20px;
  padding-bottom: 40px;
  font-size: 1.5em;
  letter-spacing: 10px;
}

.profile-pic{
  display: inline-block;
  width: 140px;
  height: 140px;
  padding-left: 5px;
  padding-bottom: 20px;
}

.bio{
  float: right;
  font-family: 'Alegreya Sans', sans-serif;
  padding-top: 50px;
  margin-right: 15px;
}

.bio p{
  font-size: .9em;
}

.bio h3{
  font-size: 1.7em;
  font-weight: lighter;
}

.description{
  overflow: hidden;
}

.description p{
  float: left;
  padding: 0 10px 15px 15px;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
  font-size: .9em;
  line-height: 15px;
}

.button{
  border: solid black 1px;
  background: transparent;
  width: 200px;
  padding: 10px;
  margin: 0 auto;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: .90em;
  cursor: pointer;
  text-align: center;
  margin-bottom: 40px;
}

.next-testimonial{
  padding-top: 20px;
}

.next-testimonial p{
  text-align: center;
  padding-bottom: 5px;
}

.next-testimonial img{
  display: block;
  margin: 0 auto;
  padding-bottom: 30px;
}

/* Info */
.box{
  width: 280px;
  margin: 20px auto;
}
.box-title{
  width: 280px;
  background-color: #ffd200;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom: 8px solid white;
}

.box-title p{
  text-align: center;
  padding: 20px 20px;
  font-size: 1.7em;
}

.box-content{
  width: 280px;
  background-color: #f7f0e6;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
}

.box-content p{
  padding: 15px;
}

.box-content p + p{
  padding-bottom: 40px;
}

.margin-bottom, li.margin-bottom{
  margin-bottom: 40px;
}

.button-info{
  margin-bottom: 60px;
}

.payment ul{
  padding-left: 40px;
}

.payment li{
  padding-bottom: 10px;
}

.margin-bottom p + p{
  color: #e11a27;
  font-weight: bold;
  font-family: 'Open Sans', sans-serif;
  font-size: .8em;
  line-height: 15px;
}

.margin-bottom p{
  padding-bottom: 5px;
}

/* Footer */

footer{
  background-color: #ffd200;
  overflow: hidden;
}

.nav-wrapper{
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}

.nav{
  width: 40%;
  border-top: solid black 1px;
  float: left;
  margin-top: 30px;
  margin-left: 4%;
  margin-right: 4%;
}

.nav li{
  padding-top: 10px;
  list-style: none;
}

.nav li:hover{
  text-decoration: underline;
}
.nav li a{
  text-decoration: none;
}

.nav li a:visited{
  color: black;
}

.nav img{
  padding-top: 10px;
  list-style: none;
  cursor: pointer;
  padding-bottom: 20px;
}

.social-footer{
  width: 40%;
}
.copyright{
  text-align: center;
  padding-bottom: 10px;
  width: 100%;
}

平板电脑样式（600px宽度）

@media only screen
  and (min-width: 370px){
    /* steps */
    .circles{
      margin-right: 20px;
    }

    /* testimonials */
    .profile-pic{
      padding-left: 15px;
    }

    .bio{
      margin-right: 30px;
    }

}

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

  /* banner */

  .banner h1{
    font-size: 1.6em;

  }

  .button{
    width: 230px;
    padding: 15px;
    font-size: 1em;
  }

  /* steps */
  .circles{
    width: 90%;
    padding-top: 70px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    overflow: hidden;
    margin-top: 0;
  }

  .circle{
    width: 83px;
    height: 83px;
    float: left;
  }

  .dashed-line{
    width: 45px;
    height: 0;
    float: left;
    margin: 42.5px auto;
  }

  .captions{
    width: 90%;
    height: 150px;
    margin: 0 auto;
  }

  .captions p{
    display: inline-block;
    margin-bottom: 0;
    top: 20px;
    margin-right: 45px;
    margin-left: 5px;
  }

  p.margin-fix{
    margin-right: 0;
  }

  /* advantage */
  .adv-desc{
    float: left;
    margin-bottom: 100px;
    margin-top: 50px;
  }

  .white-circle{
    float: right;
    width: 230px;
    height: 230px;
  }

 .social{

  }

  .social img{
    width: 230px;
    height: 230px;
    margin-right: 0;
  }

  .make-your{
    /*top: 40px;*/
  }

  /* testimonials */
  .bio{
    padding-right: 100px;
  }

  .profile-pic{
    padding-left: 150px;
  }

  .description{
    width: 70%;
    margin: 0 auto;
  }
}

3 个答案:

答案 0 :(得分：0)

问题正在发生，因为adv-desc类上应用了边距。 div包含＆＃34;照片编辑＆＃34;正在被包含＆＃34;从您的社交网络导入照片的div的底部边缘捕捉到＃34;。第二张图片不适合在同一条线上，因此它被推下。您可以尝试减少这些边距或更改标记以包含div中的行。

答案 1 :(得分：0)

尝试这样的事情

@media only screen and (min-width: 600px)
.adv-desc {
    float: left;
    /* margin-bottom: 100px; */
    /* margin-top: 50px; */
    width: 300px;
}
.advantage {
    overflow: hidden;
    width: 600px;
    margin:0 auto;
}
.social {
    float: left;
    width: 300px;

}
.make-your {
   clear:both;
}
}

演示：https://jsfiddle.net/q6m8us0t/2/

答案 2 :(得分：0)

尝试减少.adv-desc的保证金。

@media only screen and (min-width: 600px){
.adv-desc {
    float: left;
    margin-bottom: 70px;
    margin-top: 50px;
 }
}
相关问题
最新问题