在同一水平面上放置兩個div

我需要將兩個div元素放在同一水平面上。按照我所做的方式，第二個顯示在第一個下方。我想將它們放在一起，讓它們在轉換時相互交叉。在同一水平面上放置兩個div

編輯1- Here當按下按鈕交換他們的類時，div上下移動。

#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.

來源

2012-04-05 Sumit Sinha

親愛的看到我的答案，讓我知道，如果我落後了一些地方。 – w3uiguru 2012-04-05 16:53:45

謝謝Dinesh，但是當我把按鈕放在那裏時它不工作。在你的答案中看到評論。 – 2012-04-05 17:03:37

[Here]（http://jsfiddle.net/ht6M9/3/）當按下按鈕交換他們的類時，div上下移動。 – 2012-04-05 17:22:27

使用span，也可以將樣式設置爲display:inline-block

來源

2012-04-05 16:41:33

您可以在此使用float屬性實現：

<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>

的示範看到這個jsFiddle。下面是輸出：

enter image description here

來源

2012-04-05 16:42:53

請參閱爲什麼不能正常工作[鏈接]（http://jsfiddle.net/ht6M9/1/）.. – 2012-04-05 17:01:18

由於合併的邊距等於100％，因此會下降到下一行，這會強制元素下降到下一行。看到這個更新的小提琴：http://jsfiddle.net/ht6M9/2/ – 2012-04-05 17:06:26

[這裏]（http://jsfiddle.net/ht6M9/3/）當按下按鈕交換他們的類，divs上下移動。 – 2012-04-05 17:20:42

我相信你會喜歡漂浮的div

.float-left{ 
    float:left; 
} 

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

如果右格仍然被視爲一個「塊」元素，則其將佔據整個行。這兩個元素都需要浮動，或者需要設置特定的寬度。

來源

2012-04-05 16:43:18

只需要將所有div都放在左邊，如果您要求它們並排放置。

根據div的內容，您可能還需要爲每個類指定一個寬度。

來源

2012-04-05 16:46:11 zigojacko

看到搗鼓代碼和演示

小提琴：http://jsfiddle.net/ht6M9/

演示：http://jsfiddle.net/ht6M9/embedded/result/

來源

2012-04-05 16:53:06 w3uiguru

，但現在看它不工作[link]（http://jsfiddle.net/ht6M9/1/）.. – 2012-04-05 17:00:14

在同一水平面上放置兩個div

回答

相關問題