浮動元素的順序顛倒了

Question

我想實現以下布局：

********* 
* Image *  Price | Add-to-cart-icon | Amount
*********

但是，正如您在此小提琴中所看到的那樣，“價格|加入購物車圖標|金額”的順序為“添加到購物車圖標|金額|價格”。 為什么會發生這種情況？如何實現所追求的布局？ 也許最好通過使用display: inline ？來對齊元素。

我的HTML代碼：

 <div class="views-column">
  <img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vitoria_-_Museo_Ciencias_Naturales16.JPG">
  <div class="feldgruppe">
    10,00 €
    <form class="commerce-add-to-cart">
      <div>
        <input src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
        <div class="form-item-quantity">
          <label>Anzahl </label>
          <input size="3">
        </div>
      </div>
    </form>
  </div>
</div>
<div class="views-column">
  <img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Pyrite_from_Ampliaci%C3%B3n_a_Victoria_Mine%2C_Navaj%C3%BAn%2C_La_Rioja%2C_Spain_2.jpg">
  <div class="feldgruppe">
    19,00 €
    <form class="commerce-add-to-cart">
      <div>
        <input name="submit" src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
        <div class="form-item-quantity">
          <label>Anzahl </label>
          <input size="3">
        </div>
      </div>
    </form>
  </div>
</div>

我的CSS：

    .views-column {
  position: relative;
  clear: both;
  padding-top: 1em;
}

.views-column img {
  float: left;
  max-width: 35%;
  height: auto;
  padding-right: 1em;
}

.feldgruppe,
.commerce-add-to-cart {
  float: left;
}

input.form-submit {
  float: left;
  max-width: 30px;
}

.form-item-quantity {
  float: left;
}

Answer 1

如果要全部使用float，則應將價格文本包裝到div或span並將其也浮動到左側。 但是我建議使用內聯塊而不是float，因此需要更少的CSS。

.views-column img {
  max-width: 35%;
  height: auto;
  padding-right: 1em;
}

.views-column div,
.views-column form {
  display: inline-block;
  vertical-align: top;
}

input.form-submit {
  max-width: 30px;
}

jsFiddle

 .views-column { position: relative; clear: both; padding-top: 1em; /* white-space: nowrap; */ } .views-column img { max-width: 35%; height: auto; padding-right: 1em; } .views-column div, .views-column form { display: inline-block; vertical-align: top; } input.form-submit { max-width: 30px; } 

 <div class="views-column"> <img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vitoria_-_Museo_Ciencias_Naturales16.JPG"> <div class="feldgruppe"> 10,00 € <form class="commerce-add-to-cart"> <div> <input src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image"> <div class="form-item-quantity"> <label>Anzahl </label> <input size="3"> </div> </div> </form> </div> </div> <div class="views-column"> <img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Pyrite_from_Ampliaci%C3%B3n_a_Victoria_Mine%2C_Navaj%C3%BAn%2C_La_Rioja%2C_Spain_2.jpg"> <div class="feldgruppe"> 19,00 € <form class="commerce-add-to-cart"> <div> <input name="submit" src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image"> <div class="form-item-quantity"> <label>Anzahl </label> <input size="3"> </div> </div> </form> </div> </div>