如何使用可变高度进行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

看起来像你的浮动：左边正在应用于你的.colRight类。 这可能是导致右栏显示在左栏上的原因。

Answer 2

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

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

  最初，rightCol-left设置为“display：none”

• 当媒体屏幕低于1020px时，隐藏rightCol（显示：无），并显示rightCol-left（显示：块）

这是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代码对网页的负载要小得多。