网格系统html

时间:2017-01-15 15:44:24

标签: html css grid

enter image description here

我只是想知道是否有人可以帮助我,我已经尝试了3个小时来解决这个问题。我需要通过使用网格或任何东西来获得图片上的界面。 我能得到的最接近的事情是除了第二个底部网格之外的所有内容都正确显示。它通常低于白线(这是起点)。 有人可以给我一个如何解决这个问题的提示。

1 个答案:

答案 0 :(得分:0)

您至少有两个选择:

一个是使网格元素绝对定位并为它们提供顶部,左侧,右侧和底部值。父元素(网格容器)应该具有“position:relative;” (或者可以是固定的或绝对的,但在你的情况下,亲戚会更有意义)。

另一种选择是写下这样的标记:

<div class="col-xs-6">
 <div class="col-xs-12">
 one
</div>
 <div class="col-xs-12">
 two
</div>
</div>

<div class="col-xs-6">
three
</div>

基本上你将左边的两个div包装成一个父div,这样布局就不会破坏。只需确保内部div的高度是右侧框高度的50%。