流动性与不同长度的卡 [英] Fluidity with Cards of Different Lengths

问题描述

我一直在使用卡片样式来我一直在设计的网站。正如你所看到的，它是由单独的卡片分隔的信息，并使事实，它是明显的单独。

我的问题是，我唯一的方式，我知道我的头顶部实现了一个好的标准，是在另外两个

$ b中创建两个 div
$ b

像这样：

 < div id =container-onealign = center> 
< div id =container-two> 
 
< div class =container-two-leftalign =center> 
< / div> 
 
< div class =container-two-rightalign =center> 
< / div> 
 
< / div> 
  
 
 
 
 
 
 
 
虽然他们调整大小，再次，好吧电脑;其流动性对于较小的移动设备不保持一致。移动浏览器选择只显示整个网站，就像缩小 - 这是工作，但是当我想让文字足够大，只是看一下是不理想。
 
 
 
我似乎有的问题是，我可以 float：left; 所有我想要的，但只要一张卡变大，保留相同的一种一种另一种风格，如上图所示（使用左右两个容器）。
 
 
 
有更好的方法
解决方案
您可以使用媒体查询来构建这样的布局，可以让您的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）} 
 
} 
  
 
I've been using a card style for a website I've been designing. As you can see, it is made of individual cards to separate the information and make the fact that it is separate obvious.

My problem is that the only way I knew off the top of my head to achieve this to an alright standard, was to create two div elements inside of another two.

Something like this:
<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>


Although they resize to something, again, alright for computers; the fluidity of it doesn't stay consistent for smaller, mobile devices. The mobile browser instead chooses to just show the whole site as if zoomed out - which, yeah, works, but isn't ideal when I want text to be big enough to just glance at.

The problem I seem to be having is that I can float: left; all I want, but as soon as one card becomes bigger, it doesn't retain the same one-after-the-other style, as shown in the image above (using the two containers for left and right).

Is there a better way to handle the placement of those cards?
解决方案
You can build a layout like this using media queries, that way at phone sizes you will be able to make your divs larger and appear to be bigger on the screen.

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)}

}


                        
这篇关于流动性与不同长度的卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！