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

如果你想全部使用float，你应该将 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>

浮动元素的顺序是相反的

1 个答案: