Question

我想将HTML div相对于彼此布局，例如Android's RelativeLayout。

任何想法如何实现它？感谢。

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

enter image description here

Answer 1

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

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

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

The layout is here.

修改：Here是px值为.div2_2的布局。

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

<强> HTML

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

我希望这会对你有所帮助。

Answer 2

您可以使用CSS中的display属性将div放在同一个'line'上。

使用

或

'inline-block'表示你的div可以被赋予高度和宽度属性，而'inline'就是你内容的大小。在这种情况下，您可能希望使用内联块，以便排列div。

Answer 3

使用float和clear找到了一种方式：

<!DOCTYPE html>
<html>
<body>
  <div style="width: 100%; height: 50px; background-color: blue;"></div>
  <div style="width: 60%; height: 50px; background-color: red; float: left"></div>
  <div style="width: 40%; height: 50px; background-color: yellow; float: left"></div>
  <div style="width: 40%; height: 50px; background-color: green; clear:left; float: right">
</body>
</html>

您可以使用代码here。

* clear:left的目的是将绿色保持在下一行 - 即使红色和黄色的大小更改为像素而不是百分比。

enter image description here

Answer 4

查看此页面，了解如何在“网格系统”中布置网页

getbootstrap.com/css

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

4 个答案: