css3 的display:flex可以实现。
demo:
html结构
<div class="flex-box">
<div class="col">
<p>左侧内容</p>
</div>
<div class="col">
<p>右侧内容</p><p>右侧内容</p>
</div>
</div>
样式
<style>
.flex-box {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
color:white;
}
.flex-box>.col{
flex: 1;
padding: 20px;
}
.flex-box>.col:first-child {
background: red;
-webkit-order: 1;
-ms-flex-order: 1;
order: 0;
}
.flex-box >.col:last-child {
background: black;
-webkit-order: 0;
-ms-flex-order: 0;
order: 1;
}
</style>
Photoshop|
Dreamweaver|
SVG|
WebGL|
Visual Studio|
PowerDesigner|
Eclipse|
Git|
Apache Ant|
Atom|
Composer|
CodeSmith|
Flex|
Gradle|
Maven|
Sublime Text3|
SVN|
Tableau|
Vim|
Chrome开发者工具|
OpenGL|
Unity|
Direct3D|
用户登录
还没有账号?立即注册
用户注册
投稿取消
文章分类: |
|
还能输入300字
上传中....