html - HTML 编码的基础/问题

Question

任何人都可以帮助我处理我的产品购物车页面吗？我找不到哪里出错了。

.body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.main {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.mainWrapper {
  position: relative;
  width: 100%;
  min-width: 320px;
  min-height: 1000px;
  padding: 0;
  margin: 0 !important;
  background: radial-gradient(#303d55, #2f3352);
}

.wrappen_block {
  position: relative;
  width: 100%;
  height: 100%;
}

.mainBackground {
  width: 100%;
  min-height: 1000px;
  background: url("../img/bgRectangl.png") left center no-repeat, url("../img/bgPhons.png") center center no-repeat, url("../img/layer-3-copy-2.png") center center no-repeat, url("../img/mainBg.png") center center no-repeat;
}

.productCard_block {
  position: relative;
  margin: 190px auto 0;
  max-width: 800px;
  min-height: 600px;
  box-shadow: 0 5px 21px rgba(0, 0, 0, 0.08);
  background-color: #fff;
}


/* LEFT SIDE */

.productCard_leftSide {
  position: relative;
  width: 100%;
  min-height: 600px;
}

.productCard_brendBlock {
  width: 100%;
  height: 75px;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 184px;
  max-height: 75px;
  background-color: #272727;
  z-index: 2;
}

.productCard_brendBlock__imageBlock {
  display: block;
  height: 100%;
}

.productCard_brendBlock__imageBlock img {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.sliderBlock {
  position: relative;
  height: 100%;
  margin-left: 70px;
  margin-top: 89px;
  margin-bottom: 46px;
  overflow: hidden;
}

.sliderBlock_items {
  position: relative;
  display: block;
  width: 100%;
  height: 403px;
}

.sliderBlock_items__itemPhoto {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  transition: opacity 1s;
}

.sliderBlock_items__showing {
  opacity: 1;
  z-index: 3;
}

.sliderBlock_items:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url("../img/decorElements/DecorRectangle.png") 50% 50% no-repeat;
  opacity: 0.2;
  z-index: 4;
}

.sliderBlock_controls {
  width: 100%;
}

.sliderBlock_controls__navigatin {
  margin-top: 8px;
  width: 100%;
}

.sliderBlock_controls__wrapper {
  margin: 1% auto;
  width: 110px;
  height: 20px;
}

.sliderBlock_controls__arrow {
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;
  border: 1px solid #536dfe;
  transition: 300ms all;
  background-color: #0d2660;
  border-radius: 50%;
}

.sliderBlock_controls__arrow:hover {
  background-color: #536dfe;
}

.sliderBlock_controls__arrow i {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  margin-left: -50%;
  margin-top: -50%;
  color: #fff;
  transition: 300ms all;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}

.sliderBlock_controls__arrowBackward {
  float: left;
}

.sliderBlock_controls__arrowForward {
  float: right;
}

.sliderBlock_positionControls {
  display: block;
  width: 100%;
  height: 3px;
  margin: 30px auto 0;
}

.sliderBlock_positionControls__paginatorItem {
  float: left;
  width: 18px;
  height: 10px;
  margin-left: 5px;
  background-color: #D7D7D7;
  cursor: pointer;
}

.sliderBlock_positionControls__paginatorItem:first-child {
  margin-left: 31%;
}

.sliderBlock_positionControls__active {
  background-color: #536dfe;
}


/*   RIGHT SIDE */

.productCard_rightSide {
  position: relative;
  padding-top: 34px;
  padding-left: 27px;
  padding-right: 40px;
  width: 100%;
  min-height: 600px;
}

.block_specification {
  float: right;
  margin-top: 8px;
  cursor: pointer;
  color: #536dfe;
  transition: all 0.5s;
}

.block_specification__button {
  display: inline-block;
  margin-right: 7px;
  height: 100%;
  font-size: 17px;
  text-transform: uppercase;
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}

.block_specification:hover .block_specification__button__rotate {
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: rotate(1turn);
  -ms-transform: rotate(1turn);
  transform: rotate(1turn);
}

.block_specification:hover {
  color: #f1425d;
}

.block_specification__text {
  width: 30px;
  height: 11px;
  font-family: 'Titillium Web', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.block_model {
  display: inline-block;
  color: #263238;
  font-size: 12px;
  opacity: 0.9;
}

.block_name {
  width: 100%;
  color: #263238;
  font-weight: 400;
  line-height: 35px;
}

.block_name__mainName {
  margin: 0;
  padding: 0;
  font-size: 29px;
}

.block_name__addName {
  margin: 0;
  padding: 0;
  font-size: 24px;
}

.block_product {
  position: relative;
  width: 100%;
}

.block_product__advantagesProduct {
  width: 271px;
  height: 41px;
  margin-top: 14px;
  color: #646b6f;
  font-size: 17px;
  line-height: 24px;
}

.block_product__link {
  line-height: 23px;
  color: #536dfe;
}

.block_informationAboutDevice {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.block_descriptionInformation {
  width: 304px;
  height: 104px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  color: #263238;
}

.block_descriptionCharacteristic {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  z-index: 30;
  transition: left, ease-out, 0.5s;
}

.block_descriptionCharacteristic__active {
  left: 0;
}

@-webkit-keyframes moveCharackeristic {
  0% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}

@keyframes moveCharackeristic {
  0% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}

.block_specificationInformation_table {
  position: relative;
  height: 99.9%;
  background-color: #fff;
}

.block_specificationInformation_table tr {
  border-collapse: collapse;
  border: 1px solid #000;
}

.block_specificationInformation_table th {
  border: 1px solid #000;
  font-weight: bold;
}

.block_specificationInformation_table td {
  border-collapse: collapse;
  text-align: center;
  border: 1px solid #000;
}

.block_rating {
  width: 100%;
  margin-top: 33px;
}

fieldset,
label {
  margin: 0;
  padding: 0;
}

.block_rating__stars {
  border: none;
  float: left;
  width: auto;
  margin: 0;
  padding: 0;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
  margin: 0;
}

.block_rating__stars>input {
  display: none;
}

.block_rating__stars>label:before {
  margin: 5px;
  font-size: 15px;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.block_rating__stars>.half:before {
  content: "\f089";
  position: absolute;
}

.block_rating__stars>label {
  color: #c9c9c9;
  float: right;
}


/***** CSS Magic to Highlight Stars on Hover *****/

.block_rating__stars>input:checked~label,
.block_rating__stars:not(:checked)>label:hover,
.block_rating__stars:not(:checked)>label:hover~label {
  color: #fccf47;
}


/* hover previous stars in list */

.block_rating__stars>input:checked+label:hover,
.block_rating__stars>input:checked~label:hover,
.block_rating__stars>label:hover~input:checked~label,
.block_rating__stars>input:checked~label:hover~label {
  color: #FFED85;
}

.block_rating__avarage {
  margin-left: 31px;
  color: #f1425d;
  font-size: 15px;
  line-height: 35px;
}

.block_rating__reviews {
  margin-left: 6px;
  color: #656c6f;
  font-size: 13px;
}

.block_price {
  margin-top: 29px;
  width: 100%;
}

.block_price__currency {
  padding: 0;
  margin: 0;
  vertical-align: top;
  color: #f1425d;
  font-size: 26px;
  font-weight: 600;
}

.block_price__shipping {
  padding: 0;
  margin: 0;
  color: #A2A9AD;
  font-size: 12px;
}

.radio_button {
  position: absolute;
  opacity: 0;
}

.block_goodColor {
  margin-top: 29px;
  width: 100%;
}

.block_goodColor__allColors {
  width: 100%;
  margin-top: 14px;
}

.block_goodColor__radio {
  display: inline-block;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  margin-left: 10% !important;
  background-color: #e8e6e3;
  cursor: pointer;
}

.radio_button:checked+.block_goodColor__radio {
  width: 25px;
  height: 25px;
  box-shadow: 0 0 5px 3px rgba(83, 109, 254, 0.5);
  border: 2px solid #fff;
}

.block_goodColor__black {
  background-color: #3c383a;
}

.block_goodColor__silver {
  background-color: silver;
}

.text_specification {
  padding: 0;
  color: #37474f;
  font-size: 13px;
}

.block_quantity {
  position: relative;
  height: 46px;
  margin-top: 45px;
}

.block_quantity span {
  display: inline-block;
  float: left;
  margin-top: 15px;
  margin-right: 10px;
}

.block_quantity__chooseBlock {
  vertical-align: top;
  height: 100%;
  margin: 0;
  padding: 0;
}

.block_quantity__number {
  display: inline-block;
  float: left;
  width: 52px;
  height: 46px;
  border: 1px solid #ddd;
  font-size: 18px;
}

.block_quantity__number::-webkit-input-placeholder {
  color: #403f40;
  font-size: 18px;
  line-height: 35px;
}

.block_quantity__number::-moz-placeholder {
  color: #403f40;
  font-size: 18px;
  line-height: 35px;
}

.block_quantity__number:-ms-input-placeholder {
  color: #403f40;
  font-size: 18px;
  line-height: 35px;
}

.block_quantity__number::placeholder {
  color: #403f40;
  font-size: 18px;
  line-height: 35px;
}

.block_quantity__button {
  display: inline-block;
  position: relative;
  float: left;
  width: 20px;
  height: 50%;
  margin: 0;
  padding: 0;
  margin-left: 11px;
  font-size: 0;
  cursor: pointer;
}

.block_quantity__button:hover,
.block_quantity__button:focus {
  background-color: transparent;
}

.block_quantity__button:hover:before,
.block_quantity__button:focus:before {
  color: #536dfe;
}

.block_quantity__up:before {
  content: "\f106";
  width: 11px;
  height: 6px;
  font-family: "FontAwesome";
  color: #37474f;
  font-size: 18px;
}

.block_quantity__down:before {
  content: "\f107";
  width: 11px;
  height: 6px;
  font-family: "FontAwesome";
  color: #37474f;
  font-size: 18px;
}

.button.button_addToCard {
  width: 147px;
  height: 46px;
  margin-top: 43px;
  margin-bottom: 0;
  padding: 0;
  color: #fff;
  background-color: #536dfe;
  font-size: 17px;
  transition: all 0.3s;
}

.button.button_addToCard:hover {
  background-color: #0d2660;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" /> 
<main class="main">
  <div class="mainWrapper">
    <div class="mainBackground clearfix">
      <div class="row">
        <div class="column small-centered">
          <div class="productCard_block">
            <div class="row">
              <div class="small-12 large-6 columns">
                <div class="productCard_leftSide clearfix">
                  <div class="productCard_brendBlock">
                    <a class="productCard_brendBlock__imageBlock" href="#">
                      <img src="img/brtendsLogos/logo_sennheiser.png" alt="sennheiser">
                    </a>
                  </div>

                  <div class="sliderBlock">
                    <ul class="sliderBlock_items">
                      <li class="sliderBlock_items__itemPhoto sliderBlock_items__showing">
                        <img src="img/goods/item1/phones1.png" alt="headphones">
                      </li>
                      <li class="sliderBlock_items__itemPhoto">
                        <img src="img/goods/item1/phones2.png" alt="headphones">
                      </li>
                      <li class="sliderBlock_items__itemPhoto">
                        <img src="img/goods/item1/phones3.png" alt="headphones">
                      </li>
                      <li class="sliderBlock_items__itemPhoto">
                        <img src="img/goods/item1/phones4.png" alt="headphones">
                      </li>
                      <li class="sliderBlock_items__itemPhoto">
                        <img src="img/goods/item1/phones5.png" alt="headphones">
                      </li>
                    </ul>

                    <div class="sliderBlock_controls">
                      <div class="sliderBlock_controls__navigatin">
                        <div class="sliderBlock_controls__wrapper">
                          <div class="sliderBlock_controls__arrow sliderBlock_controls__arrowBackward">
                            <i class="fa fa-angle-left" aria-hidden="true"></i>
                          </div>
                          <div class="sliderBlock_controls__arrow sliderBlock_controls__arrowForward">
                            <i class="fa fa-angle-right" aria-hidden="true"></i>
                          </div>
                        </div>
                      </div>

                      <ul class="sliderBlock_positionControls">
                        <li class="sliderBlock_positionControls__paginatorItem sliderBlock_positionControls__active"></li>
                        <li class="sliderBlock_positionControls__paginatorItem"></li>
                        <li class="sliderBlock_positionControls__paginatorItem"></li>
                        <li class="sliderBlock_positionControls__paginatorItem"></li>
                        <li class="sliderBlock_positionControls__paginatorItem"></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="small-12 large-6 columns">
                <div class="productCard_rightSide">
                  <div class="block_specification">
                    <div class="block_specification__specificationShow">
                      <i class="fa fa-cog block_specification__button block_specification__button__rotate" aria-hidden="true"></i>
                      <span class="block_specification__text">spec</span>
                    </div>
                    <div class="block_specification__informationShow hide">
                      <i class="fa fa-info-circle block_specification__button block_specification__button__jump" aria-hidden="true"></i>
                      <span class="block_specification__text">inform</span>
                    </div>
                  </div>

                  <p class="block_model">
                    <span class="block_model__text">Model: </span>
                    <span class="block_model__number">505795</span>
                  </p>

                  <div class="block_product">
                    <h2 class="block_name block_name__mainName">MOMENTUM<sup>&reg; </sup></h2>
                    <h2 class="block_name block_name__addName">Wireless Black</h2>

                    <p class="block_product__advantagesProduct">
                      Wireless headphones with integrated microphone
                    </p>

                    <div class="block_informationAboutDevice">

                      <div class="block_descriptionCharacteristic block_descriptionCharacteristic__disActive">
                        <table class="block_specificationInformation_table">
                          <tr>
                            <th>Characteristic</th>
                            <th>Value</th>
                          </tr>
                          <tr>
                            <td>Ear Coupling</td>
                            <td>Around Ear</td>
                          </tr>
                          <tr>
                            <td>Transducer Principle</td>
                            <td>Dynamic, Closed-back</td>
                          </tr>
                          <tr>
                            <td>Frequency Response</td>
                            <td>16Hz – 22kHz</td>
                          </tr>
                          <tr>
                            <td>Sound Pressure Level (SPL)</td>
                            <td>113 dB (Passive: 1 kHz/1 Vrms)</td>
                          </tr>
                          <tr>
                            <td>Total Harmonic Distortion (THD)</td>
                            <td>&lt;0.5% (1 kHz, 100 dB SPL)</td>
                          </tr>
                          <tr>
                            <td>Volume Control</td>
                            <td>Earcup control when Bluetooth connected</td>
                          </tr>
                          <tr>
                            <td>Microphone Type</td>
                            <td>Dual omni-directional microphone <br>(2 mic beam forming array)
                            </td>
                          </tr>
                          <tr>
                            <td>Cable / Connector</td>
                            <td>1.4m (Detachable) / 3.5mm Angled</td>
                          </tr>
                          <tr>
                            <td>Weight</td>
                            <td>260g (9.17 oz)</td>
                          </tr>
                        </table>
                      </div>


                      <div class="block_descriptionInformation">
                        <span>Peak performance with active noise cancelation. Sennheiser's new MOMENTUM Wireless
                                                - Closed circumauralheadphone featuring <a class="block_product__link"
                                                                                           href="#">Bluetooth<sup>&reg;</sup></a>  wireless technology and NoiseGard Hybrid active noise cancelation
                                                </span>
                      </div>

                      <div class="block_rating">
                        <fieldset class="block_rating__stars">
                          <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
                          <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
                          <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="Good - 4 stars"></label>
                          <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Above average - 3.5 stars"></label>
                          <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Average - 3 stars"></label>
                          <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
                          <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
                          <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
                          <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
                          <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
                        </fieldset>

                        <span class="block_rating__avarage">4.25</span>
                        <span class="block_rating__reviews">(153 reviews)</span>

                      </div>
                      <div class="row">
                        <div class="large-6 small-12 column">
                          <div class="block_price">
                            <p class="block_price__currency">$499.95</p>
                            <p class="block_price__shipping">Shipping and taxes extra</p>
                          </div>
                          <div class="block_quantity">
                            <span class="text_specification">Quantity</span>
                            <div class="block_quantity__chooseBlock">
                              <input class="block_quantity__number" name="quantityNumber" type="text" min="1" value="1">
                              <button class="block_quantity__button block_quantity__up"></button>
                              <button class="block_quantity__button block_quantity__down"></button>
                            </div>
                          </div>
                        </div>
                        <div class="large-6 small-12 end column">
                          <div class="block_goodColor">
                            <span class="text_specification">Choose your colors:</span>
                            <div class="block_goodColor__allColors">
                              <input type="radio" name="colorOfItem" class="radio_button" id="radioColor" checked/>
                              <label for="radioColor" class="block_goodColor__radio block_goodColor__black"></label>
                              <input type="radio" name="colorOfItem" class="radio_button" id="radioColor2" />
                              <label for="radioColor2" class="block_goodColor__radio block_goodColor__silver"></label>
                            </div>
                          </div>
                          <button class="button button_addToCard">
                                                        Add to Cart
                                                    </button>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</main>

为了清楚起见，我给你看两张照片。第一张照片是现在的样子，第二张照片应该是这样的

[ ] 图片有问题1[ ] 2

Answer 1

您只需将类 clearfix 添加到 block_rating div，因为该 div 中的 float 元素导致前面的 float 元素堆叠在它们旁边。

https://codepen.io/anon/pen/XgXqqd