我想将HTML div相对于彼此布局,例如Android's RelativeLayout。
任何想法如何实现它?感谢。
编辑:问题是一般问题,但我看到人们请求一个具体的例子,所以这里是链接中的一个。您可以将示例布局要求简化为:从开始到结束的蓝色方块。下面是两个正方形:红色和黄色。黄色到红色的右边直到结束。在黄色下方,一个与右侧对齐的绿色方块。总共4个div,相对于彼此布局。
答案 0 :(得分:0)
与Android一样,在HTML中,您无法直接定义线性或相对布局。但是通过CSS你可以定义你想要的任何设计。
例如,在您的问题中,您已要求四个输入以特定格式对齐。
您可以将所有输入包装在div中,并使用 float 属性进行对齐。
修改: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)
<!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
的目的是将绿色保持在下一行 - 即使红色和黄色的大小更改为像素而不是百分比。
答案 3 :(得分:0)
查看此页面,了解如何在“网格系统”中布置网页
getbootstrap.com/css