我不能用引导程序来完成这个任务。我使用reactjs和radium(类似react native的样式),我尝试使用flexbox,但是我能够使用css和媒体查询。
我有三列的布局。从桌面访问时,显示如下:
--------------------------
| column 1 | |
------------| column 2 |
| column 3 | |
--------------------------
第1列和第3列的高度将与第2列相同。
在移动/平板电脑/调整大小浏览器中查看时,我希望如下所示:
-------------
| column 1 |
-------------
| column 2 |
-------------
| column 3 |
-------------
列2需要在列1和列3之间移动,在这种配置中,每列的高度无关紧要。
下面的示例中,我使用镭,但可以使用css和媒体查询。
columnsContainer: {
display: "flex",
flexDirection: "row",
@media (min-width:"xxx"px): {
flexDirection: "column"
}
},
rightColumn: {
width: "392px",
@media (min-width:"xxx"px): {
marginTop: "32px",
width: "100%"
}
},
leftColumn: {
flex: "1",
@media (min-width:"xxx"px): {
marginRight: "0px",
marginLeft: "0px"
}
},
bottomColumn: {
flex: "1",
@media (min-width:"xxx"px): {
marginRight: "0px",
marginLeft: "0px"
},
}
在我的HTML下面:
<div style={styles.columnsContainer}>
<div style={styles.leftColumn}>
Column 1
</div>
<div style={styles.rightColumn}>
Column 2
</div>
<div style={styles.bottomColumn}>
Column 3
</div>
</div>
最佳答案
由于您可以使用flexbox,下面是一个您可以尝试的示例。
用于按要求放置柱。
.outer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.one {
background: red;
height: 200px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
}
.two {
background: blue;
height: 200px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
}
.three {
background: green;
height: 200px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
}
@media only screen and (max-width: 600px) {
.outer {
max-height: 400px;
}
.one {
width: 50%;
order: 1;
}
.two {
width: 50%;
order: 3;
height: 400px;
}
.three {
width: 50%;
order: 2;
}
}
<div class="outer">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>