我的问题简短而准确。我已经用谷歌搜索,但是没有找到任何关于那的信息。

目前我有3列布局

----------------------------
|left|the-main-column|right|
----------------------------


实际代码:

<div class="main">
    <div class="col-left sidebar">
        <div class="left-sidebar-nav"></div>
    </div>
    <div class="col-main"></div>
    <div class="col-right sidebar">
        <div class="right-sidebar-cart"></div>
    </div>
</div>


1.我想要的是将右列移到左列的顶部

-----------------------
|right|the-main-column|
-------               |
|left |               |
-----------------------

<div class="main">
    div class="col-right sidebar">
            <div class="right-sidebar-cart"></div>
    </div>
        <div class="col-left sidebar">
            <div class="left-sidebar-nav"></div>
        </div>
        <div class="col-main"></div>
</div>


2.或者在没有包装的情况下将右列内容放在左列的内部

_______________________
|right|the-main-column|
|left |               |
-----------------------

<div class="main">
        <div class="col-left sidebar">
            <div class="right-sidebar-cart"></div>
            <div class="left-sidebar-nav"></div>
        </div>
        <div class="col-main"></div>
</div>


仅使用CSS可以做到吗?什么是javascript / jquery解决方案?我也对我的第二个问题解决方案感兴趣,因为类似地,我将滑块从主列移动到左侧边栏的顶部。

最佳答案

第一部分可以完成。就像是:

<div class="right">right</div>
<div class="left">left</div>
<div class="main">main</div>


(顺序很重要),再加上:

.right {
  float: left;
}

.left {
  float: left;
  clear: left;
}

@media only screen and (min-width: 780px) {
  .right {
    float: right;
  }
}


示例:http://codepen.io/paulroub/pen/baivl

不能100%确定您在第二项中的要求。

关于javascript - 响应式3列布局将第3列移入第1列/在第1列顶部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19055494/

10-13 03:55