将两个div放置在同一水平线上

Question

将两个div放置在同一水平线上

6

我需要将两个 div 元素放在同一水平线上。按照我目前的方式，第二个 div 会显示在第一个 div 的下方。我希望以一种交叉的方式放置它们，同时进行过渡效果。

编辑1- 当按下按钮以交换它们的类时，在这里，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.

- Sumit Sinha

请查看我的答案，让我知道是否有任何遗漏之处。 - w3uiguru

谢谢Dinesh，但是当我把按钮放在那里时它不起作用。请查看您答案中的评论。 - Sumit Sinha

当按钮被按下以交换它们的类时，div会上下移动。 - Sumit Sinha

5个回答

2

我相信您想要浮动div元素

.float-left{
  float:left;
}

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

如果右侧的 div 元素仍被视为 "块级" 元素，那么它将占用整行。这两个元素都需要浮动，或者需要设置特定的宽度。

- Kevin Bowersox

2

使用 span，或者将样式设置为 display:inline-block

- Justin Pihony

1

请查看 JSFiddle 上的代码和演示：

JSFiddle：http://jsfiddle.net/ht6M9/

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

- w3uiguru

0

如果您需要将它们并排排列，请将所有 div 元素向左浮动。

根据 div 的内容，您可能还需要为每个类分配一个宽度。

- zigojacko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Johnson · Accepted Answer

你可以使用 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>

点击这里查看一个演示。以下是输出结果：

enter image description here