Жидкость с картами различной длины

Question

Я использую стиль карты для a website I've been designing. Как вы можете видеть, из отдельных карточек можно разделить информацию и сделать то, что она отдельная.

Моя проблема заключается в том, что единственный способ, которым я знал, что с верхней части моей головы, чтобы достичь этого к Alright стандарта , было создание двух 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)} 

}