如何像Android的RelativeLayout那样相对于彼此布置HTML div？

Question

我想相对于彼此布置 HTML div，例如Android 的 RelativeLayout。

知道如何实现它吗？谢谢。

编辑：这个问题是一个普遍的问题，但我看到人们要求一个具体的例子，所以这是链接中的一个。您可以将示例布局要求简化为：从头到尾的蓝色方块。在它下面有两个方块：红色和黄色。黄色到红色的右边直到结束。在黄色下方，一个与右侧对齐的绿色方块。总共 4 个 div，彼此相对布置。

Answer 1

与 Android 一样，在 HTML 中您不能直接定义线性或相对布局。但通过 CSS，您可以定义您想要的任何设计。

例如，在您的问题中，您要求四个输入以特定格式对齐。

您可以将所有输入包装在一个 div 中，并使用float属性使其对齐。

布局在这里。

编辑：这是 .div2_2 的布局（以 px 值表示）。

您可以使用以下 html 和 css 实现此布局。

超文本标记语言

<div class="parent">
    <div class="div1">
            <input type="text" placeholder="Reminder Name"/>
    </div>
    <div class="div2">
        <div class="div2_1">
            <input type="text" value="Wed, Jun 27, 2012"/>
        </div>
        <div class="div2_2">
            <input type="text" value="8.00am"/>
        </div>
    </div>
    <div class="div3">
        <div class="div3_1">
            <input type="button" value="Done"/>
        </div>
    </div>
</div>

CSS

div{
    padding: 3px 0;
}
input {
    width: 100%;
}
.parent{
    width: 400px;
}
.div1, .div2, .div3{
    width: 100%;
}
.div2{
    display: inline-block;
}
.div2_1, .div2_2{
    display: inline-block;
}
.div2_1{
    width: 55%;
    float: left;
}
.div2_2{
    width: 44%;
    float: right;
}
.div3_1{
    width: 30%;
    display: inline-block;
    float: right;
}

我希望这对您有帮助。