如何实现多个div横排列

如题所述

第1个回答  推荐于2018-03-11
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个回答  2011-05-03
浮动:左对齐本回答被提问者采纳
第3个回答  2011-05-03
float布局,或者display:block也行
第4个回答  推荐于2016-07-21
方法一:
一般情况,默认的div是写一个换一行,div默认的display属性是block。所以每一个div都是新的一行,现在把display换成inline就不会换新行了。
<div style="background-color:#ff0000;display:inline;">aaa</div>
<div style="background-color:#ffff00;display:inline;">bbb</div>
方法二:
这里使用float:right属性。float做为CSS中的一个属性定义元素向哪个方向浮动。
float:right 文本或图像会移至父元素中的右侧。
注意有写情况float属性必须配合width使用,否则失效。
<td class="bg10">
<div style="width:120px; float:right;">阅读次数:9999</div>
<div style="width:200px; float:right;">发表日期:2009-09-10</div>
</td>
.bg10 {
background-image:url(../images/news_r6_c4.jpg);
height:24px;
line-height:24px;
color:#939393;
}
height:24px; 和 line-height:24px; 高度一致,文字垂直居中。

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

两个DIV如何横向排列?
DIV默认的display属性是block。所以每一个DIV都是新的一行,现在把display换成inline就不会换新行了。两个DIV横向排列方法二:这里使用float:right属性。float做为CSS中的一个属性定义元素向哪个方向浮动。float:right文本或图像会移至父元素中的右侧。注意有写情况float属性必须配合width使用,否则失效。hei...

一行内怎么显示3个div层呢?
1.语法:float : none | left |right 2.参数:none : 对象不浮动 left : 对象浮在左边 right : 对象浮在右边 3.实例:例如有3个div块,其id属性分别为div1、div2、div3,则可以将3个div块的float属性均设为left,就可以依次做横行排列了。CSS部分:.divstyle{width:100px; height:200...

网页中如何让三个DIV同时并列
1、新建一个html页面,用于实现多个div显示在同一行上。2、在html代码页面上写两个div标签,并分别给这个两个div标签添加class类,类名分别为:one,two。如下图所示:3、创建div标签后开始设置两个div的样式,把样式写在style标签里面。css样式代码如下图所示:4、设置好class类属性后,保存html代码,...

多个div横排超过部分吥换行,隐藏如何做?(已解决)
回答:写多个 DIV A 包含这些小 DIV b c d f g把这个div宽度设足够长, 比如 3000px; 高度 150px(看需要)同时包含它div 设置成 overflow:hidden;<div id="A"><div class="a">XX<\/div><div class="b">XX<\/div><div class="c">XX<\/div><div class="d">XX<\/div><div class="f...

怎么将自定义不确定多个div在页面显示时均匀的横向排列
当DIv超出屏幕如何显示?是隐藏\/轮播,还是缩小div的wdith?横向列的的问题好解决,把这些div 的float设为left或是right就可以实现。css:.div-box div{float:left;height:50px;} html:<div class="div-box"> <div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div> ...

多个DIV自动横向排列如何自动撑开父级DIV并出现横向滚动条? 父级div...
把这一句 style="width:2000px;"去掉,当它所在的div里面的内容增多的时候,就自然有横向滚动条了。可以多复制几个class=“glist”的整个div试试看。例如:<div id="teamLeft" class="f_l"> <div class="glist"> <div class="gimg"><a href="goods.php?id={$goods_list.goods_id}"><...

怎么实现div横向排布
将多个div元素样式设置为浮动,浮起来就能排列 div{float:left;}

用jquery拼接出来的许多div为什么是垂直排列的,怎么变成横向排列
可以改变div的style,添加浮动让它们横着排列,float:left;(左浮动),float:right;(右浮动)。浮动会影响下面的元素,如果不想要浮动可以用clean去掉。

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

相似回答