DIV+CSS布局问题?如何使DIV表格横排列
这段代码是(高30,宽200)的DIV表格,里面包括两个(高30,宽80的)DIV表格.
问题输出的是“222_DIV”“333_DIV”DIV表格是上下排列的,我想让他左右排列,需要怎么修改呢??就是想不通
请帮我说明下,
<style type="text/css">
#111 {
height: 30px;
width: 200px;
}
#222 {
height: 30px;
width: 80px;
}
#333 {
height: 30px;
width: 80px;
}
.h {
font-size: 12px;
line-height: 30px;
}
.j {
border: 1px dashed #CCCCCC;
}
</style>
<div id="111" class="j"align="center">
<div id="222" class="h j">这是222_DIV</div>'
<div id="333" class="h j">这是333_DIV</div>'
</div>
div 肯定是要换行的, 有三种办法:
1.里面的DIV用span来代替. SPAN不换行.
<div id="111" class="j"align="center">
<div id="222" class="h j">这是222_DIV</div>'
<div id="333" class="h j">这是333_DIV</div>'大掘睁
</div>
2.如果只是两个DIV(没有那两个引号), 可以在CSS里增加float参数, 如222里加上 float:left; 333里加上 flat:right;
#222 {
float: left;
height: 30px;
width: 80px;
}
#333 {
float: right;
height: 30px;
width: 80px;
}
3.把里面的两个DIV放在表格里(不过既然你用DIV就滚岁不想用表格了)(同样只是两个DIV,没有那两个引号).
<div id="111" class="j"align="center">
<table border=0>
<tr><td>
<div id="222" class="h j">这是222_DIV</div>'
</td><td>
<div id="333" class="h j">这是333_DIV</div>'
</td>散颤</tr>
</table>
</div>
div 肯定是要换行的, 有三种办法:
1.里面的DIV用span来代替. SPAN不换行.
<div id="111" class="j"align="center">
<div id="222" class="h j">这是222_DIV</div>'
<div id="333" class="h j">这是333_DIV</div>'大掘睁
</div>
2.如果只是两个DIV(没有那两个引号), 可以在CSS里增加float参数, 如222里加上 float:left; 333里加上 flat:right;
#222 {
float: left;
height: 30px;
width: 80px;
}
#333 {
float: right;
height: 30px;
width: 80px;
}
3.把里面的两个DIV放在表格里(不过既然你用DIV就滚岁不想用表格了)(同样只是两个DIV,没有那两个引号).
<div id="111" class="j"align="center">
<table border=0>
<tr><td>
<div id="222" class="h j">这是222_DIV</div>'
</td><td>
<div id="333" class="h j">这是333_DIV</div>'
</td>散颤</tr>
</table>
</div>
没那么麻烦 加个float就可以了叫它帆岩怎么排版布局 就怎么排版布局--->
#222 {
height: 30px;
width: 80px;
float:left;
}
#333 {
height: 30px;
width: 80px;
float:right;
}
不加浮动你的效果肯定猜燃是上下态兆御布局...
楼上说的比较详细,通常用第二种方法比较好。符合CSS规范。
<span id="222" class="液简h j">这是222_DIV</蔽丛span>' <span id="333" class="h j">这是333_DIV</span>'闹并裤