如何制作具有可变高度的 3 到 2 列响应式设计？答案

【问题标题】：How to make 3 to 2 column responsive design with variable heights?如何制作具有可变高度的 3 到 2 列响应式设计？
【发布时间】：2015-02-17 17:12:18
【问题描述】：

使用媒体查询进行 3 列响应式设计很简单，但如果我希望中间列保持 100% 高度，而右列位于左列，那就很棘手了。

问题出现是因为中间列的高度是可变的，因此不可能给转换后的右列提供负边距。

这里是css代码示例：

/* 3 columns css */
.colLeft, .colRight, .colMid{
   width: 280px;
   float: left;
}
.colMid{
   width: 500px;
}
.colRight{
   width: 240px;
}
.container{
width: 1020px;
   margin: 0 auto;
}

/* Media queries */
@media screen and (max-width: 1020px) {
.container {
    width: 780px!important;
}
    .rightCol{
        width: 280px;
    }
}

HTML：

<div class="container">
    <div class="leftCol">
    </div>

    <div class="midCol">
    </div>
    <div class="rightCol">
    </div>
</div>

此代码工作正常，但中间列高将转换后的右列向下推。我的问题：这个问题有 HTML/CSS 解决方案吗？或者我必须在屏幕重新调整大小时更改 HTML 渲染？

谢谢，

【问题讨论】：

标签： css html responsive-design

【解决方案1】：

看起来您的 float: left 正在应用于您的 .colRight 类。这可能是导致右列显示在左列的原因。

【讨论】：

我的朋友，我打算......让它响应

【解决方案2】：

我找到了解决方案，只使用 CSS/HTML。解释如下：

我创建了一个重复的 rightCol div 并将其放在 leftCol div 中，并将其命名为 rightCol-left。

最初将 rightCol-left 设置为“display:none”
当媒体屏幕低于1020px时，隐藏rightCol(display:none)，显示rightCol-left(display:block)

这里是 CSS：

.rightCol-left{display:none;}     /*duplicate div*/

@media screen and (max-width: 1020px) {
    .container {
        width:780px!important;
    }
    .rightCol{
        display:none;
    }
    .rightCol-left{
        display:block;
        width:280px;
    }
}

这里是 HTML：

<div class="leftCol">
    /*Left column content*/

    <div class="rightCol-left">  /* will be displayed when screen is below 1020px */
    </div>
</div>

<div class="midCol">
    /* mid column content */
</div>

<div class="rightCol">  /* gets hidden when screen is below 1020px */
</div>

这很完美，唯一不好的是重复的 HTML 代码。但这并不明显而且非常轻微，毕竟 HTML 代码对网页产生的负载比 JavaScript 或其他任何东西要少得多。

【讨论】：