javascript - 了解布局

Question

我正在创建一个布局来测试我的技能。我遇到了有关布局的问题:

我创建了一个条形图(见图片)，但这个条形图被 card div(400x200 图像)重叠。表单中的少数元素(在 bar div 内)被放置在页面底部它们应该在的位置，但彩色条的放置方式错误。 您可以亲眼看到结果和代码。 我附上了我想要达到的结果的照片。

不需要的结果:

$(function(){

    var $buttonNav = $('.header__icon-bar');
     var degree = 45;
  $buttonNav.on('click', function(e){
    e.preventDefault();
    $('.header__nav').toggleClass('is-open');
    $buttonNav.toggleClass('animate');


  if( $('.header__nav').hasClass('is-open')){
   $('.header__icon-bar').css('transform','rotate(90deg)')
  }else{
   $('.header__icon-bar').css('transform','rotate(0deg)')
  }


});//end of click event

});//end of $(document).ready()

/*----------
GENERAL
-----------*/
html,body{ width: 100%; margin: 0; padding: 0; }
body{  background: #eee; }
.animate{
  -webkit-trasform: rotate(90deg);
  -ms-trasform: rotate(90deg);
  trasform: rotate(90deg);
}


/*----------
HEADER
-----------*/
.header__nav{  display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px; position: relative; z-index: 100;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none; text-transform: uppercase; }
.header__nav__item a:hover { background: #ff3333; }

/*----------
cover
-----------*/
.cover{ background-color: #333; height: 80% ; width: 100%;position: relative; margin-top: 90px; padding: 30px;}
.cover__text { color: white; width: 95%; position: relative; left: 40px; }
.cover__text p{ color: #999999; font-size: 20px; }
.line-through{padding: 1px; width: 750px; height: 1px;  background-color:  #e6ccb3; display: table; margin: 0 auto; z-index: 30px;}
.cover__image{ margin:  0; padding:  0; float: left; z-index: 3; width: 600px; height: 400px;  z-index: 20; background-image: url(http://www.dejana.com/wp-content/uploads/2014/08/550x370.png);
  background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
  background-position: center; }
.cover__button { margin: 0 auto; display: table; padding: 20px}
.cover__button a{ padding: 20px; background-color: #ff3333;border-radius: 5px; text-decoration: none; color: black; font-weight: bold;}
.cover__button a:hover{ background: #eee; color: #ff3333; }


/* HIDING OVERFLOW ELEMENTS
html,body{overflow-x: hidden;}
*/

/*---------
CARD
----------*/
.card{ position: relative; margin-top: 30px;  max-width: 1440px;}
.card__img {float: right; margin: 20px 10px; width: 400px; height: 200px}
.card__img:hover{opacity: 0.5}




/*----------
ICON-BAR
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}

/*----------
ICON-BAR
-----------*/
.bar{ background-color: #333; height: 50px; border: 1px red solid; margin:0; padding: 0}


/*----------
SMARTPHONE
-----------*/
@media(max-width: 960px) {
  /*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; }
.header__nav__item { display: block; padding: 20px; margin: 0; position: relative;}
.header__nav__item a{ width: 100%;padding-right: 100%;}

.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}

/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left; position: absolute;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}

/*cover*/
.cover{ height: auto; padding: 10px; margin-top: 30px; width: 100%}
.cover__image{  padding:  0; margin: 0; width: 97%; height: 400px; display: block; }
.cover__text{ margin: 0; left: 0; top: 20px; padding: 10px; width: 100%; display: block; overflow-y: scroll;}
.cover__text p {font-size: 16px}
.line-through{ width: 90%}
.cover__button { margin-top: 15px; position: relative; margin-bottom: 10px;}
.cover__button a{ padding: 10px; font-size: 15px;}


/*cards*/
.card{ margin-top: 50px }
.card__img{ margin: 0 ;  padding: 10px 20px; }



}/*END OF @font-face */





















*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}





/*----------
CLEARFIX
-----------*/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <header class="header clearfix">
   <div class="header__background">

   <a class="header__icon-bar animate" href="">
      <span></span>
      <span></span>
      <span></span>
  </a>
</div>


    <ul class="header__nav">
      <li class="header__nav__item">  <a href="#"> Home    </a> </li>
      <li class="header__nav__item">  <a href="#"> Contact </a>    </li>
      <li class="header__nav__item">  <a href="#"> Apply   </a>    </li>
      <li class="header__nav__item">  <a href="#"> About   </a>    </li>
    </ul>


 </header>


<div class="cover">

    <div class="cover__image"></div>


  <div class="cover__text">
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<span class="line-through"></span>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="cover__button"><a href=""> Buy a New Course</a></div>
</div>


<section class="card">
  <img  class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png"  />
  <img  class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png"  />
  <img  class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png"  />

</section>


<section class="card">
  <img  class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png"  />
  <img  class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png"  />
  <img  class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png"  />

</section>


<div class="bar ">
  <form action="" method="get">

<label for="email">Email</label><input type="email" name="email" value="email@exemple.com">
<input type="submit" value="Iscriviti"/>
</form>
</div>

Answer 1

您忘记清除 float 。尝试将 overflow: hidden 应用于 .card 类。