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

Question

使用媒体查询进行 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 渲染？

谢谢，

Answer 1

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

Answer 2

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

我创建了一个副本 rightCol div 并将其放在 leftCol div 中，并将其命名为 righCol-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 代码。但这并不明显，而且非常小，毕竟，与 JavaScript 或其他任何代码相比，HTML 代码对网页产生的负载要小得多。

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

How to make 3 to 2 column responsive design with variable heights?

html

css

responsive-design