HTML+CSS 响应式 DIV 网格

Question

我正在做一个元素，我想为它创建一个带有 div 的响应式页面。它看起来像一个网格，在小屏幕上而不是 3 列，div 将重新组织为 2 列。

这是我使用简单 html 的地方:

<div id="main">
    <div id="right-column">Php generated content</div>
    <div id="left-column">
        <div class="element">Article 1</div>
        <div class="element">Article 2</div>
        <div class="element">Article 3</div>
        <div class="element">Article 4</div>
        <div class="element">Article 5</div>
        <div class="element">Article 6</div>
        <div class="element">Article ...etc</div>
    </div>
</div>

http://jsfiddle.net/GeorgesL/1zdx735y/

在 2 列之后它并没有占据整个宽度，我可能没有能力理解为什么......

此外，我必须准确地说，文章实际上是图片。 非常感谢:)

卢卡斯

Answer 1

最重要的是你需要

1. 管理不同断点的wrapper div的宽度
2. 对.element 使用float:left;

除此之外，这里还有基本的三个基本点，这些点通常是您编写 css 时特定的。

@media screen and (max-width:959px){

}
@media screen and (max-width:640px){

}
@media screen and (max-width:320px){

}

请注意:

1. 特意没有在断点下添加任何 CSS - 如果您可以自己尝试，那将是最好的。
2. 您可以使用更多的 breal-points 以及特定于各种设备尺寸。