如何像Android的RelativeLayout一样相互布局HTML div？

我想展示HTML div相对于另一个，如Android's RelativeLayout。如何像Android的RelativeLayout一样相互布局HTML div？

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

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

enter image description here

来源

2015-05-25 AlikElzin-kilaka

你能否说明一下你尝试过这么远吗？ – Nitesh

你能提供一个你想要实现的布局的例子吗？ –

在链接中添加了示例并写了一个简化的要求。 –

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

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

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

The layout is here.

编辑：Here是与像素值.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; 
}

我希望这将是对你有帮助。

来源

2015-05-25 13:03:44 sasi

如果我将'div2_1'更改为绝对宽度（以像素为单位），则所有内容都会折叠，因为'div2_2'没有被定义为位于'div2_1'的右侧。请参阅此处对像素的更改：http://plnkr.co/edit/I5Lk65ekR97KC2mclemn?p=preview。 –

如果更改.div2_2的px宽度，则必须添加.div2 {display：inline-block} – sasi

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

使用

display: inline;

或

display: inline-block;

'inline-block的' 意味着你的DIV可以给出高度和宽度属性，而 '内联' 将只是你的内容的大小。在这种情况下，您可能需要使用内联块，以便您可以排列您的div。

来源

2015-05-25 13:03:46 khopsickle

发现使用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

来源

2015-05-25 15:28:00

尝试释放“float：left”。自己惊喜。 –

下面是另一个版本，它将黄色定位在黄色下方：http://plnkr.co/edit/c0JrLSSkAvpyWyhgkfCU?p=preview –

无论如何，这是迄今为止所有其他的解决方案，都很糟糕！没有什么是相对于另一个。一切都是恒定的！ –

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

getbootstrap.com/css

来源

2017-03-01 16:43:49 BossmanT

尽管链接可能有帮助，但请尝试在答案中包含重要信息。 – mhatch

如何像Android的RelativeLayout一样相互布局HTML div？

回答

相关问题