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

时间:2015-05-25 11:51:34

标签: html css layout

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

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

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

enter image description here enter image description here

4 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

使用

X

6

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

答案 2 :(得分:0)

使用floatclear找到了一种方式:

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

答案 3 :(得分:0)

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

getbootstrap.com/css