This is the text:
productName $100 Add to Cart
I want to layout the text in follow:
productName $100 Add to Cart
the "pro开发者_C百科ductName", and "$100" should align left, and Add to Cart should align right, I know that it can be done using table tag, but apart from tables, any other suggestion?
The following markup will work. You might want to limit the width of either of the divs of course, as they will be 100% of their parent container widths.
<div>
productName
<div>
<span style="float:right">Add to Cart</span>
$100
</div>
</div>
Like this:
<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
Hope this helps.
Try using "Float" tags in your divs
Try placing each of the 3 in separate divs and then float them left or right inside a containing which has a fixed width.
精彩评论