Đặt hai div ở cùng một mức ngang

Question

Tôi cần đặt hai phần tử div ở cùng một mức ngang. Làm theo cách tôi đã thực hiện làm cho thứ hai được hiển thị dưới đầu tiên. Tôi muốn đặt chúng theo cách mà chúng vượt qua nhau trong khi chuyển đổi.

Chỉnh sửa 1- Here khi nút được nhấn để hoán đổi các lớp, div di chuyển lên và xuống.

#aaidi,#aaidi3 { 
-webkit-transition: margin-left 1s ease-in-out; 
-moz-transition: margin-left 1s ease-in-out; 
-o-transition: margin-left 1s ease-in-out; 
transition: margin-left 1s ease-in-out; 
} 
.left { 
margin-left: 45%; 
border: 1px solid green ; 
width: 20px; 
height: 4px; 
background: #FF0000; 
} // similar for right with margin-left:55% 
...... 
     <tr> 
      <td colspan=3> 
       <div id="aaidi" class="left"> 
       </div> 
       <div id="aaidi3" class="right"> 
       </div> 
      </td> 
     </tr> // after this there is a button pressing whom changes the class of both divs. 

Answer 1

Sử dụng một span, hoặc bạn có thể thiết lập các phong cách để display:inline-block

Answer 2

Bạn có thể đạt được điều này bằng cách sử dụng float tài sản:

<style type="text/css"> 
    div.container { 
     margin: 15px; 
    } 
    div.left, div.right { 
     float: left; 
     padding: 10px;  
    } 
    div.left { 
     background-color:orange;  
    } 
    div.right { 
     background-color: yellow;  
    } 
</style> 

<div class="container"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div> 

Xem jsFiddle này cho một cuộc biểu tình. Dưới đây là kết quả:

Answer 3

Tôi tin rằng bạn muốn thả nổi div

.float-left{ 
    float:left; 
} 

<div id="aaidi" class="float-left left"></div> 
<div id="aaidi3" class="float-left right"></div> 

Nếu div đúng vẫn đang được xem như là một yếu tố 'khối' sau đó nó sẽ mất toàn bộ hàng. Cả hai yếu tố cần phải được thả nổi, hoặc chiều rộng cụ thể cần phải được thiết lập.

Answer 4

Chỉ cần thả tất cả các div còn lại nếu bạn yêu cầu chúng nằm cạnh nhau.

Tùy thuộc vào nội dung của div, bạn có thể cần chỉ định độ rộng cho mỗi lớp.

Answer 5

thấy fiddle cho mã và demo

fiddle: http://jsfiddle.net/ht6M9/

demo: http://jsfiddle.net/ht6M9/embedded/result/