前提是几个div宽度总和不能超出父元素的宽度。
<div
class="d1
clearfix">
<div
class="d1-1"></div>
<div
class="d1-2"></div>
<div
class="d1-3"></div>
</div>
css:
.d1{
width:1200px
margin:0
auto
overflow:hidden}
.d1
div{
float:left/*将块元素div设定权为左浮动*//*display:inline-block
_display:inline*/
width:400px
height:150px
background:#ccc}
1、首选看一下html代码:
html代码:
<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>
这种方法是借助于负的margin来实现的,首先在中间列定好固定值,因为此值是不会在改变的,接着对其进行左浮动;那么关键地主是在左右边栏设置地方,这种方法是将其都进行50%的宽度设置,并加上中负的左边距,此负的左边距最理想的值是中间栏宽度的一半加上1px,这样一来,左右边栏内容无法正常显示,那是因为对他们进行了负的左边距操作,现在只需要在左右边栏的内层div.inner将其拉回来。
2、css样式写法如下:
#left,
#right {
float: left
margin: 0 0 0 -271px
width: 50%
}
#main {
width: 540px
float: left
background: green
}
.inner {
padding: 20px
}
#left .inner,
#right .inner {
margin: 0 0 0 271px
background: orange
}
3、具体效果如下:
css如何让三个div并排展示,其实就是设置一个浮动点,让三个div靠左或者靠右浮动;
主要标签用于:float:left(靠左对齐)float:right(靠右对齐):示例如下:
1、首先打开用到的编辑工具这里用DW
2、为了方便观察,我们把三个div设置三个背景颜色来观察,设置三个div样式这里取名:div1 div2 div3 并且引用三个样式;
详解:background:#颜色;是取的三个不同的div背景颜色;给三个div设置宽度为width:300px高度height:200px
3、展示出来的效果如图: