我的问题简短而准确。我已经用谷歌搜索,但是没有找到任何关于那的信息。
目前我有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/