CSS的常用操作
一、在HTML中实现两个div并排显示
- 设置为行内样式,
display:inline-block
。 - 设置
float
浮动。 - 设置
position
定位属性为absolute
。
设置每个div
的展现属性为行内样式:
<div class="app">
<div style="display:inline-block;background:#f00;">div1</div>
<div style="display:inline-block;background:#0f0;margin-left:10px;">div2</div>
</div>
设置float
浮动:
<div class="app">
<div style="float:left;background:#f00;">div1</div>
<div style="float:left;background:#0f0;margin-left:10px;">div2</div>
</div>
设置position
定位属性为absolute
:
<div class="app">
<div style="position: absolute;width:100px;background:#f00;">div1</div>
<div style="position: absolute;left:100px;background:#0f0;margin-left:10px;">div2</div>
</div>