Предложения по размещению веб-страниц с использованием CSS

Question

Это текст:

productName $ 100 Добавить в корзину

Я хочу расположить текст следующим образом:

productName 
$100              Add to Cart

«productName» и «$ 100» должны быть выровнены влево, а «Добавить в корзину» должны выровнены вправо, Я знаю, что это можно сделать с помощью табличного тега, но кроме таблиц, есть еще какие-нибудь предложения?

Answer 1

Следующая разметка будет работать. Возможно, вы захотите ограничить ширину любого из элементов div, так как они будут составлять 100% ширины их родительского контейнера.

<div>
  productName
  <div>
    <span style="float:right">Add to Cart</span>
    $100
  </div>
</div>

Answer 2

Как это:

<div class="product">
    <div class="name">Product Name</div>
    <div class="clear">
        <div class="price">
            $100
        </div>   
        <div class="actions">
            <a href="#">Add</a> to <a href="#">Cart</a> 
        </div>   
    </div>
</div>

CSS:

  .product{ //if you care to specify a width }
  .product .name{ padding: 5px 0; } 
  .product .price, .product .actions{ float: left; padding: 5px 0; }   
  .product .price{ width: 150px;} //customize width to your preference
  .product .actions{ width: 350px; } //customize width to your preference
  .product .actions a{ margin: 0 5px;} 

  .clear{ overflow: hidden;} //reusable class for clearing floats

Надеюсь, это поможет.

Answer 3

Попробуйте использовать теги "Float" в ваших divs

Answer 4

Попробуйте поместить каждый из 3 в отдельные div, а затем поместите их влево или вправо внутри контейнера, который имеет фиксированную ширину.