Question

我一直在使用a website I've been designing的卡片样式。正如您所看到的，它是由单独的卡片组成，用于分隔信息并使其明显分开。

我的问题是，我唯一能够达到好的标准的方法就是在另外两个内部创建两个div元素。

这样的事情：

<div id="container-one" align="center">
<div id="container-two">

    <div class="container-two-left" align="center">
    </div>

    <div class="container-two-right" align="center">
    </div>

</div>

虽然他们又重新调整了一些东西，但好的用于计算机;对于较小的移动设备，它的流动性并不保持一致。相反，移动浏览器选择只显示整个网站，就像缩小一样 - 是的，是的，但是，当我希望文本足够大而不能只看一眼时，它并不理想。

我似乎遇到的问题是我可以float: left;我想要的一切，但只要一张卡变得更大，它就不会保持相同的一个接一个的风格，如上图所示（使用左右两个容器）。

有没有更好的方法来处理这些卡的位置？

Answer 1

您可以使用媒体查询构建这样的布局，这样在电话尺寸下，您可以使div更大，并且在屏幕上看起来更大。

http://jsfiddle.net/e9ypqy5t/11/

#container-one{width: 100%; height: 1200px; background-color: lightblue;}
#container-two{width: 800px; height: calc(100% - 6px); border-style: solid; border-color: red;}
.container-two-left{width: calc(50% - 6px); height: 50px; border-style: solid; border-color: green; float: left; margin-top: 10px;}
.container-two-right{width: calc(50% - 6px); height: 50px; border-style: solid; border-color: orange; float: left; margin-top: 10px;}

@media (max-width: 900px){
    #container-two{width: calc(100% - 12px);}
}
@media (max-width: 600px){
    .container-two-left{width: calc(100% - 6px);}
    .container-two-right{width: calc(100% - 6px)}

}

不同长度的卡片的流动性

1 个答案: