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>
温馨提示:内容为网友见解,仅供参考
第1个回答  2015-12-04
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>
第2个回答  2007-07-20
没那么麻烦 加个float就可以了叫它怎么排版布局 就怎么排版布局--->
#222 {
height: 30px;
width: 80px;
float:left;
}
#333 {
height: 30px;
width: 80px;
float:right;
}
不加浮动你的效果肯定是上下布局...
第3个回答  2007-07-20
楼上说的比较详细,通常用第二种方法比较好。符合CSS规范。
第4个回答  2007-07-19
<span id="222" class="h j">这是222_DIV</span>' <span id="333" class="h j">这是333_DIV</span>'

DIV+CSS布局问题?如何使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:le...

css如何让div横向排列
可以使用弹性布局,display: flex 就可以让div横排,默认布局轴方向就是横向,justify-content: space-between可以是div平均分布在水平轴上。

css布局问题div内放表格横着放
将"tab.setAttribute("className","folder"); "这一行的"className"改成"class"即可 这个应该说是楼主有点粗心了~PS1:还要抱歉的说一下,楼上的,你的JavaScript在IE7\/8中无法被正确显示 PS2:更抱歉的说一下,我的修改在IE7中无法正常显示(但IE8可以),目前还没找到原因~PS3:最抱歉的,劝告...

<DIV>+CSS的排列怎么横着排
ul和dl 是块元素,要分行的。所以要想在一行,可以分别嵌套一个设定了宽度的div,进行浮动。

div和css使内容和图片横排的问题
给div添加float:left;就能让div横排了 个人感觉用ul列表来做更好些 <ul> <li><a href="#"><img src="#"><\/a><\/li> <li><a href="#"><img src="#"><\/a><\/li> <li><a href="#"><img src="#"><\/a><\/li> <\/ul> css:li{ width:88px;height:33px;display:inline;\/...

div+css布局错乱问题解决方法
div是一种分块机制,这就要求在设计页面时要弄清各块之间级联关系 这个问题需要把left和right再使用一个div包含起来,直接上代码啦,下边就可以实现你要求的布局。foot总在下边,并能随着left,right的高度改变自动调整。<div id="box"> <div id="content"> <div id="left">这里是页面的左部分...

怎样让一个div里的多个div横向排列
1、新建html文档,在body标签中添加一个div标签,然后在这个div标签中添加一些div标签:2、为外div标签和内div标签添加一些样式,由于div元素是块级元素,所以内div会在外div中垂直排列:3、为内div添加“display: inline-block;”样式,这时内div就会变成行级块元素,这样内div就会在div中横向排列了:...

如何让div中的内容横向排列
一、问题可能涉及到了浮动和行内元素两个知识点,首先需要div布局,写一个大的div作为父级盒子,里面有几个行内元素。如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DIV内容横向排列<\/title> <style type="text\/css"> .container { width: 500px;margin: ...

如何用DIV+CSS制作横向菜单
1、div宽度和不要超过屏幕宽度,2、使用float属性,left,right都可以 3、注意对布局的影响,可用 clear消除

divcss布局教程(divcss布局教程)
简述CSS+DIV布局的常用方法。1、方法一:对div使用绝对布局position:absolute;并设置top,left,right,bottom的值相等,但不一定都等于0;并且设置margin:auto。方法二:这个方法要知道div的宽度和高度。2、DIVCSS网站布局中border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,...

相似回答