浮动元素的顺序颠倒了

Question

我想实现这样的布局：

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

但是正如你在this fiddle中看到的，"Price | Add-to-cart-icon | Amount"的顺序是"Add-to-cart-icon | Amount | Price"。为什么会发生这种情况，我怎样才能实现所追求的布局？也许使用 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

如果你想为所有人使用浮动，你应该将 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>

浮动元素的顺序颠倒了

Order of floated elements is reversed

html

css

css-float