浮动元素的顺序颠倒了答案

【问题标题】：Order of floated elements is reversed浮动元素的顺序颠倒了
【发布时间】：2016-07-13 03:05:33
【问题描述】：

我想实现这样的布局：

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

但正如您在this fiddle 中看到的那样，“价格 | 加入购物车图标 | 金额”的顺序是“加入购物车图标 | 金额 | 价格”。为什么会发生这种情况，我怎样才能实现所追求的布局？也许使用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;
}

【问题讨论】：

你在寻找这样的东西吗：jsfiddle.net/teutak/rn7wrynp/4
好的，谢谢。我完全监督了价格根本没有浮动！

标签： html css css-float

【解决方案1】：

如果您想对所有人都使用浮动，您应该将 price 文本包装成 div 或 span 并将其也浮动到左侧。但我建议使用内联块而不是浮动，因此需要较少的 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>

【讨论】：