两个div横向排列,顶端对齐的方式

author Owner  •  Filed under templates, internet

1、左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整。

* { margin: 0; padding:0;}
.left {
float: left;
}
.right {
float:left;
}

2、只有左侧div设置为float:left,右侧div设置overflow:auto;,右侧div将会占据整个右侧剩余宽度。

* { margin: 0; padding:0;}
.left {
float: left;
width: 200px;
height: 200px;
background:#009966;
}
.right {
height: 200px;
background: #FF6633;
overflow:auto;
}

3、两个div都设置为display: inline-block;这样可能会出现两个div顶端不对齐的情况,可以在右侧div设置vertical-align: top;

* { margin: 0; padding:0;}
.left {
display: inline-block;
}
.right {
display: inline-block;
vertical-align: top;   //与左侧div顶部对齐
}


Tagged: orci, lectus, varius, turpis

Comments (0)  • 2016-03-07 09:08:21 •  Edit

0 Responses

最新文章