1

我的问题简短而准确。我已经用谷歌搜索了，但没有找到任何相关信息。

目前我有 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 解决方案？我也对我的第二个问题解决方案感兴趣，因为类似地我会将滑块从主列移动到左侧边栏的顶部。

4

2 回答 2

2

第1部分可以完成。就像是：

<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% 确定您在 #2 中要问什么。

于 2013-09-27T16:21:17.733 回答
-1

它确实取决于您的标记。如果您提供一些实际代码帮助会容易得多。你不能将你的内容从一个容器移动到另一个容器吗？

基本上它绝对应该只在 CSS 中可行，但是关于你的实际代码的信息很少，我真的看不出你想要什么。

于 2013-09-27T16:22:43.147 回答