<style>
#wraper{
width:100%;
height:100px;
}
.div{
float:left;
width:75px;
height:50px;
border:1px solid bisque;
margin:auto 10px;
}
/*第一种方法结束*/
#a{
width:100%;
height:100px;
}
.b{
border:1px solid burlywood;
display:inline-block; /*或者：display:inline;*/
width:50px;
height:50px;
}
/*第二种方法结束*/
</style>
</head>
<body>
<!--第一种-->
<div id="wraper">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</div>
<!--第二种-->
<div id="a">
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
</div>
#wraper{
width:100%;
height:100px;
}
.div{
float:left;
width:75px;
height:50px;
border:1px solid bisque;
margin:auto 10px;
}
/*第一种方法结束*/
#a{
width:100%;
height:100px;
}
.b{
border:1px solid burlywood;
display:inline-block; /*或者：display:inline;*/
width:50px;
height:50px;
}
/*第二种方法结束*/
</style>
</head>
<body>
<!--第一种-->
<div id="wraper">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</div>
<!--第二种-->
<div id="a">
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
</div>
</body>
无论是float浮动还是display实现并排显示，要想并排显示首先总宽度要小于或等于对象上级宽度，这样才能并排显示实现横向排列排版布局。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
