Html 不同长度卡片的流动性

我使用卡片样式已经有好几年了。正如你所看到的，它是由单独的卡片组成的，用于分离信息，并使分离的事实显而易见

我的问题是，我脑子里知道的实现这一目标的唯一方法是在另外两个元素中创建两个

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>

虽然它们可以调整大小，但对于计算机来说，同样可以；对于较小的移动设备，it的流动性并不一致。相反，手机浏览器选择只显示整个网站，就好像缩小了一样——是的，这是可行的，但当我希望文本足够大，可以只看一眼时，这并不理想

我似乎遇到的问题是我可以

float:left所有我想要的，但一旦一张卡片变大，它就不会像上图所示那样一张接一张地保留相同的样式（使用左、右两个容器）

有没有更好的方法来处理这些卡片的放置？
您可以使用媒体查询来构建这样的布局，这样在手机大小的情况下，您将能够使您的div变大，并且在屏幕上看起来更大


您可以使用引导。Bootstrap是专为此类响应性需求而设计的。您可以设计您的网站，以便在不同的设备或不同大小的设备上呈现它。这里是所有与bootstrap相关的链接@SandeepKushwah bootstrap是为懒惰的人设计的。或者你不能使用bootstrap，而只是编写CSS来完成bootstrap所做的事情。@AdambuchanTransmisth:我不太确定，我不懒惰，我只是不想重新发明轮子；）@TomSarduy我听腻了人们说bootstrap有多棒，它如何做每件事，以及它应该如何解决每一个问题。这是一个很好的工具，但它应该作为一个工具来使用。首先要了解流体设计。要添加到其中，我在没有引导的情况下创建的所有页面的平均速度是以前的两倍，数据使用率只有以前的一半。唯一需要纠正的错误是，当视口太小而无法并排时，两列的内容会发生冲突。@JoshCrowe你说的冲突是什么意思？你回复中的列在很大程度上起作用；它们正确地分隔了内容（参见此处）。当视口变得足够小（例如，移动设备）时，它会发生碰撞。你可以看到右栏的内容在左栏的上方或下方（见这里）@JoshCrowe我的回答只是一个空壳，看来你现在还有其他问题。如果你想让我看的话，给我一把小提琴。没关系，找到了。列高度被固定在
80px
，我将其设置为
auto
，并将其环绕在我的元素中。
#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)}

}