1、使用float: left属性
<style type="text/css">
div{
float: left;
}
</style>
<div>第一个div</div>
<div>第二个div</div>
2、使用display: inline属性
<style type="text/css">
div{
display: inline;
}
</style>
<div>第一个div</div>
<div>第二个div</div>
3、使用white-space: nowrap;属性
<style type="text/css">
div{
white-space: nowrap;
}
</style>
<div>第一个div</div>
<div>第二个div</div>
4、使div中的img标签垂直居中显示,并动态设置img显示的图片大小(为超过div大小的图片显示原图,超过的显示图片与div相同大小)
<style type="text/css">
.imgBox{
position:relative;
border:1px solid #ccc;
height:100px;
width:120px;
/* 设置div中的图片垂直水平居中 */
display:table-cell;
text-align:center;
vertical-align: middle;
}
.imgBox img{
/* 设置img图片显示的最大高度和宽度,与div的高宽相同 */
max-width:100%;
max-height: 100%;
vertical-align: middle;
}
</style>
<div class="imgBox">
<img id="idCardImage" border=1 src="../img/addImg.png" />
</div>