首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > ASP >

怎么让同一行上的三个DIV,从左到右排列呢

2012-03-21 
如何让同一行上的三个DIV,从左到右排列呢,我是这样写的,但不能排在同一行上,三个DIV是从上至下排列的效果。

如何让同一行上的三个DIV,从左到右排列呢,
我是这样写的,但不能排在同一行上,三个DIV是从上至下排列的效果。
  <div align=left style= "border:0px solid green;width:20px;"></div>
  <div align=center style= "border:0px solid green;width:800px;"></div>
  <div align=right style= "width:150px;"></div>




[解决办法]
最好在外面也放一个div

HTML code
<div style="width:875px">                <div   align=left   style=   "border:0px   solid   green;width:20px;float:left;"> </div>                 <div   align=center   style=   "border:0px   solid   green;width:800px;float:left;"> </div>                 <div   align=right   style=   "width:150px;float:right;"> </div> </div
[解决办法]
最好在外面也放一个div
HTML code
<div style="width:975px">                <div   align=left   style=   "border:0px   solid   green;width:20px;float:left;"> </div>                 <div   align=center   style=   "border:0px   solid   green;width:800px;float:left;"> </div>                 <div   align=right   style=   "width:150px;float:right;"> </div> </div
[解决办法]
<div style="border:1px solid green;width:20px;float:left;background:red">a</div> 
<div style="border:1px solid green;width:300px;float:left;background:green">def</div> 
<div style="width:150px;background:blue;">ghgh</div> 
强烈建议CSDN改掉这个随便插空格的愚蠢透顶的BUG
[解决办法]
[code=html]
[color=red] <div style="float:left">[/color]
<div style= "border:0px solid green;width:20px;[color=red]float:left[/color]"> </div>
<div style="border:0px solid green;width:800px;[color=red]float:right[/color]"> </div>
[color=red] </div>[/color]
<div style="width:150px;[color=red]float:right[/color]"> </div>
[/code]
[解决办法]
HTML code
<div style="float:left;">12</div><div style="float:left;">12</div><div style="float:left;">12</div>
[解决办法]
HTML code
 [color=RED] <div   style="float:left"> [/color] <div   style=   "border:0px   solid   green;width:20px;[color=RED]float:left[/color]">   </div> <div   style="border:0px   solid   green;width:800px;[color=RED]float:right[/color]">   </div> [color=RED] </div> [/color] <div   style="width:150px;[color=RED]float:right[/color]">   </div>
[解决办法]
建个一行三列的table 每列嵌个div
[解决办法]
<div style="float:left">
<div style= "border:1px solid green;">fdasfdaf</div> 
<div style="border:1px solid green;"> fdafda</div>
<div style="border:1px solid green;"> fdsafdaf </div> 
</div>

------解决方案--------------------


简单的方法放个TABLE在页面就行了

HTML code
<table width="98%" border="0" cellpadding="0" cellspacing="0">  <tr>  <td> <div   align=left   style=   "border:0px   solid   green;width:20px;"></div> </td>  <td> <div   align=center   style=   "border:0px   solid   green;width:800px;"> </div> </td>  <td><div   align=right   style=   "width:150px;"> </div> </td>  </tr> </table>
[解决办法]
<style type="text/css">
div {float:left;}
</style>

<div style=border:1px solid #f00;">fuck ubb</div>
<div style=border:1px solid #0f0;">fuck ubb</div>
<div style=border:1px solid #00f;">fuck ubb</div>
[解决办法]
这个你只要定义个CSS样式就可以了啊
div {float:left;}
定义浮动!
[解决办法]
HTML code
<html>    <head>        <title>CSS</title>    </head>    <style type="text/css" rel="stylesheet">        * {            margin:0;            padding:0;        }        #left {            width:20%;            float:left;            clear:right;            height:20px;            background-color:yellow;        }        #mid{            width:60%;            float:left;            clear:right;            height:60px;            background-color:red;        }        #right{            width:20%;            float:left;            clear:right;            height:20px;            background-color:blue;        }    </style>    <div id="left"></div>    <div id="mid"></div>    <div id="right"></div></html>
[解决办法]
把三个div的样式都加入float:left就可以了。这种方法同样可以实现li元素同一行显示。
[解决办法]
其实很容易的
由于div默认是block 块 会换行
span默认是inline 内联 同一行

所以你只要把没一个div的display设置成inline即可
HTML code
<div align=left style="display:inline;border:1px solid green;width:20px;"></div><div align=center style="display:inline;border:1px solid green;width:800px;"></div><div align=right style="display:inline;border:1px solid green;width:150px;"></div>
[解决办法]
楼上的不错,

热点排行