Question

所以我遇到的问题是我有多行，其中包含3列。然而;如果我想要更小的内容宽度，我希望它下降到2列。怎么样？

我还必须提到每列都包含图像背景。我见过的每个解决方案都是将第3列项目设为100％宽，但我不能用图像做到这一点。 CSS甚至可以实现这一点吗？仅限HTML。

有什么想法吗？

提前致谢。

修改

 <div class="media-row clearfix first">
        <div class="g6 first">
            Column 1
        </div>
        <div class="g6">
            Column 2
        </div>
        <div class="g6 last">
            Column 3
        </div>
    </div>

<div class="media-row clearfix last">
    <div class="g6 first">
        Column 1
    </div>
    <div class="g6">
        Column 2
    </div>
    <div class="g6 last">
        Column 3
    </div>
</div>

.media-row { margin-bottom: 20px; }
div.g6 { float: left; margin-left: 1.76%; min-height: 20px; overflow: hidden; }
div.g6:first-child { margin-left: 0 }
div.g6 { width: 27.91%; }

Answer 1

解决方案是使用@media查询选中此fiddle

你应该找到你的html的断点并制定像这样的规则

@media only screen and (max-width: 769px) {
    div.g6{
        width: 49%;
        margin-left: 1%;
    }     
}

3列到2列。多行

1 个答案: