开发者

Suggestions on laying out web pages using CSS

开发者 https://www.devze.com 2022-12-17 03:49 出处:网络
This is the text: productName $100 Add to Cart I want to layout the text in follow: productName $100Add to Cart

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号