Question

我是CSS和HTML的新手，我的问题非常简单！

我的页面中有三个<div>标签，如下所示：

<div id="first"> foo </div>
<div id= "second"> foo </div>
<div id= "third"> foo </div>

我想像这样展示我的div：

<div id="first"> foo </div>
<div id= "second"> foo </div>  <div id= "third"> foo </div>

我想在右侧移动第三个并与第二个对齐以便在同一条线上！

我该怎么做？

Answer 1

使用float和clear属性的组合：

<style>
#first, #second, #third { float:left; }
#second { clear:left; }

/* width is not necessary. added for display purposes */
#second, #third { width:50%; } 
</style>

<div id="first"> foo </div>
<div id= "second"> foo </div>
<div id= "third"> foo </div>

http://jsfiddle.net/8d7tD/

Answer 2

这是另一种可能性（有很多方法可以做到 - 不确定是否存在已建立的“最佳方式”，这实际上取决于页面的其余部分）。

根据评论更新：

HTML

<div id="container">
    <div id="first">foo</div>
    <div id="second">foo</div>
    <div id="third">foo sadsad asdasdasd asdasdasa</div>
</div>

CSS

/*just for display purposes*/
 #first, #second, #third {
    border: 1px solid black;
    width:100px;
}
#container {
    position: relative;
    width: 210px;
}
#first {
    height:100px;
}
#third {
    position: absolute;
    right: 0;
    bottom: 0;
}

以下是演示：jsfiddle

应该注意的是，使用此功能后，您可能需要clear:both。

对齐两个不同侧面的div

2 个答案:

HTML

CSS