响应式两列布局：在另一列之间移动一列

Posted 2023-03-06

【中文标题】响应式两列布局：在另一列之间移动一列

【英文标题】：Responsive, two-column layout: Move one column in between other column

【发布时间】：2016-08-26 07:33:16

【问题描述】：

我有一个响应式网站，在大型浏览器窗口中有两列布局。两列布局目前是使用浮动实现的。在较小的屏幕上，我希望只有一列。另一列的内容应该显示在主列的两个元素之间，如下所示：

<div class="two-columns">
  <div class="main-column">
    <div class="red-element"></div>
    <div class="yellow-element"></div>
  </div>
  <div class="sidebar-column">
    <div class="green-element"></div>
  </div>
</div>

我尝试使用基于 flex-box 的方法，基本上是 the one described in this question，但是当 flex-direction 为 column 时，Safari 中似乎仍然不支持 flex-basis。适当的 Safari 支持是必须的，因为 Safari 是我的访问者的主要浏览器。

有没有一种方法可以仅使用 CSS 来实现，而不必在我的标记中放置两次绿色元素？

【参考方案1】：

你应该通过margin-top使用@media。在特定的屏幕宽度（通过@media）上，将绿色元素的margin-top更改为-200%。并将黄色元素的margin-top 更改为100%。他们改变了他们的位置非常好:) 请看这个链接：

http://jsbin.com/xozeviseka/edit?html,output

【讨论】：

媒体查询绝对是必要的，但使用基于浮动的实现我只能将绿色元素放在红色元素上方或黄色元素下方。

我完成了我的回答。所以请再次查看我的答案。

【参考方案2】：

这是使用一个弹性容器的通用解决方案：

<div class="container">
    <div class="box"> ... </div><!-- red box -->
    <div class="box"> ... </div><!-- green box -->
    <div class="box"> ... </div><!-- yellow box -->
</div>

---

从小屏幕开始（无特殊原因），将它们堆叠成一列：

.container 
    display: flex;
    flex-direction: column;


.box 
    height: 100px;
    width: 100%;

---

为更宽的屏幕重新安排布局：

@media (min-width: 800px) 

   .container 
        flex-direction: row;
        flex-wrap: wrap;
    

    .box 
        flex-basis: 45%;
    

在宽度超过 800 像素的屏幕上，容器将项目排成一行并启用换行。每个框都有足够大的宽度 (flex-basis)，一行中只能容纳两个。

---

完整演示：

* 
    box-sizing: border-box;


.container 
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    background-color: #f5f5f5;
    border: 1px solid #aaa;


.box1  background-color: red; 
.box2  background-color: lightgreen; 
.box3  background-color: yellow; 

.box 
    height: 100px;   /* `flex-basis: 100px` would also work */
    width: calc(100% - 20px);
    margin: 5px 10px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;


@media (min-width: 800px) 
    .container 
        flex-direction: row;
        flex-wrap: wrap;
    
    .box 
        flex-basis: 45%;
    

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
</div>

jsFiddle

---

根据您的问题：

...但是当flex-direction 是column 时，Safari 似乎仍然不支持flex-basis

我不确定这是否正确 (caniuse.com)。

但是，您始终可以使用 width 或 height 属性而不是 flex-basis（更多详细信息：What are the differences between flex-basis and width?）。

【参考方案3】：

您需要更改一些 html 结构，然后才能执行此操作。

*,*:after,*:before 
	box-sizing:border-box;

.two-columns 
	position:relative;
	background:#EFEFEF;
	border:1px solid #000;

.red-element,
.green-element,
.yellow-element 
	margin-bottom:30px;

.red-element 
	height:70px;
	background:#FF0004;

.green-element 
	height:70px;
	background:#7ED321;

.yellow-element 
	height:100px;
	background:#F8E71C;

@media (min-width:767px) 
	.main-column 
		width:70%;
		padding:10px;
		
	.sidebar-column 
		position:absolute;
		right:0;
		top:0;
		width:30%;
		padding:10px;
	

<div class="two-columns">
    <div class="main-column">
        <div class="red-element"></div>
            <div class="sidebar-column">
                <div class="green-element"></div>
            </div>
        <div class="yellow-element"></div>
    </div>
</div>

或者，如果您不想更改 html 结构，则必须采用另一个仅在移动设备中显示的元素，例如

*,*:after,*:before 
	box-sizing:border-box;

.two-columns 
    background: #EFEFEF;
    border: 1px solid #000;
    overflow: hidden;

.red-element,
.green-element,
.yellow-element 
	margin-bottom:30px;

.red-element 
	height:70px;
	background:#FF0004;

.green-element 
	height:70px;
	background:#7ED321;

.yellow-element 
	height:100px;
	background:#F8E71C;

.hideMobile
	display:none;

@media (min-width:767px) 
	.main-column 
		width: 70%;
		float: left;
		padding: 10px;
	
	
	.sidebar-column 
		float: right;
		width: 30%;
		padding: 10px;
		
	.showMobile 
		display:none;
	
	.hideMobile 
		display:block;
	

<div class="two-columns">
  <div class="main-column">
    <div class="red-element"></div>
    <div class="green-element showMobile"></div><!--only for mobile-->
    <div class="yellow-element"></div>
  </div>
  <div class="sidebar-column hideMobile"><!--hide in mobile-->
    <div class="green-element"></div>
  </div>
</div>

【参考方案4】：

使用引导，

<div class="row">
    <div class="col-md-8">
        <div class="red-element"></div>
    </div>

    <div class="col-md-4">
        <div class="green-element"></div>
    </div>

    <div class="col-md-8">
        <div class="yellow-element"></div>
    </div>
    <div class="clearfix"></div>
</div>

这使用浮动方法并适用于所有浏览器。