Định vị một div ở bên phải của

Question

Tôi có html và css sau đây. Nhưng những gì tôi không thể tìm ra là làm thế nào để có các div tab ở bên phải của div chính. Vì vậy, họ dính vào bên phải như dấu trang.

.main { 
    -moz-border-radius:10px; 
    height: 75%; 
    width: 60%; 
    position: absolute; 
    top: 15%; 
    left: 20%; 
    right: auto; 
    } 
.tabs { 
    width: 50px; 
    height: 1.3em; 
    position: absolute; 
    float: right; 
} 
#tab { margin: 10px 10px 10px 0px;} 

Và html:

<div class="main"> 
    <div id="content"> 
     Some main content 
    </div> 
</div> 
<div class="tabs"> 
    <div class="tabs" id="tab1"> 
     <a href="#" alt="Home"> 
      Home 
     </a> 
     </div> 
     <div class="tabs" id="tab2"> 
      <a href="#" alt="About"> 
       About 
      </a> 
     </div> 
</div> 

Answer 1

Có hai phương pháp chung để ngăn chặn việc đưa trái sang phải:

1. Làm cho họ inline; hoặc
2. Sử dụng phao nổi.

(1) sẽ là:

div.main, div.tabs { display: inline; } 

(2) sẽ là:

div.main, div.tabs { float: left; } 

Nếu bạn (2) đặt divs trong một container và thêm:

div.container { overflow: hidden; } 

Mỗi phương pháp đều có giá trị cụ thể. Đáng chú ý nhất là inline yếu tố không thể có các thuộc tính margin được áp dụng cho chúng. Đây chỉ là một trong những hạn chế về bố trí khối nội tuyến và khối trong HTML.