我正在尝试将页面分成4个相等的部分,左上角我想将其水平分成2个部分。
我主要关心的是它将在移动设备上的使用情况,我不希望像在PC上那样拆分它,我希望将其堆叠(在另一个块的上面)。如图所示。
我想到了自举网格,但我做不到。
到目前为止,我的工作大致是:

<style>
html, body { height:100%; margin:0; padding:0 }
div { position:fixed; width:50%; height:50% }
#NW { top:0;   left:0;   background:orange  }
#NE { top:0;   left:50%; background:blue    }
#SW { top:50%; left:0;   background:green   }
#SE { top:50%; left:50%; background:red     }    ​
</style>
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>​
<div id="SW"></div>


我希望div占据屏幕高度和宽度的100%。 (使用引导程序,我在执行此操作时遇到了问题)

最佳答案

注意:我对Bootstrap并不熟悉,所以它可能不像使用它的示例那么简单。这是一个简单的CSS示例。



您可以使用CSS media queries进行此操作。

笔记:


我将id更改为class es,以获得更好的可维护性。 (看来您只有宽度相同的短款和高款)。如果您要分别设置每个样式的样式(就像您对颜色所做的样式一样),请保留id
我将两个较短的容器放在<div>容器中,以便即使漂浮也能保持在一起。
如下所述,@ shirfy始终将桌面样式放在媒体查询中,以提高移动加载速度。这就是所谓的“移动优先”网页设计。


这是JSFiddle

这是一个代码段(尝试调整页面大小:在480px宽度以下将被视为“移动”并调整大小,反之亦然):



div {
    width: 100%;
    float: left;
    display: inline-block;
    box-sizing: border-box;
}
div.container > div {
    width: 100%;
}
div.short {
    height: 100px;
}
div.tall {
    height: 200px;
}
/* media query CSS */
@media screen and (min-width: 480px) {
    /* Notice how this is the desktop style */
    div {
        width: 50%;
    }
}
/* These styles are for coloring - ignore them */
div.container > div:nth-of-type(1) { background-color: #ffdddd; }
div.container > div:nth-of-type(2) { background-color: #ffddff; }
body > div:nth-of-type(2) { background-color: #ffffdd; }
body > div:nth-of-type(3) { background-color: #ddffdd; }
body > div:nth-of-type(4) { background-color: #ddddff; }

<!-- Note this container class -->
<div class="container">
  <div class="short">div1</div>
  <div class="short">div2</div>
</div>
<div class="tall">div3</div>
<div class="tall">div4</div>
<div class="tall">div5</div>

10-05 20:41
查看更多