请问怎么让DIV能容并排

heavenboya 2011-06-10 12:03:18

下面是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>并排</title>
<link rel="Stylesheet" type="text/css" href="float.css" />
</head>
<body>
<div>
<div id="left"><img src="microsoft.jpg" /></div>
<div id="right"><img src="microsoft.jpg" /></div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------

div
{
float:left;
padding:0;
width:1366px;
height:auto;
}

div #left
{
float:left;
margin:0;
width:300px;
height:auto;
}
div #right
{
float:right;
margin:0
width:300px;
height:auto;
}

但是结果还是微软图标一个在上面，一个在下面

...全文

121 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

lishiyuzuji 2011-06-14

打赏
举报

把id为left和right的div都加上属性：display:inline;就搞定，没那么麻烦的

ms 2011-06-13

打赏
举报

要并排就改为行内元素，这样就摆脱块级纵向排布的束缚了。

mercedes2 2011-06-13

打赏
举报

加上 display:block;

yanglin1122 2011-06-13

打赏
举报

这么多人说的很明确了，少分号，宽度太宽！留个言表示光顾了……
我觉得一般不给div设置样式吧！

dalmeeme 2011-06-10

打赏
举报

给img加上宽和高就行了：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

  <title>并排</title>

<style>

div

{

  float:left;

  padding:0;

  width:1366px;

  height:auto;

}

#left

{

  float:left;

  margin:0;

  width:300px;

  height:auto;

}

#right

{

  float:right;

  margin:0;

  width:300px;

  height:auto;

}

img {

  width:300px;

  height:300px;

}

</style>

</head>

<body>

  <div>

  <div id="left"><img src="microsoft.jpg" /></div>

  <div id="right"><img src="microsoft.jpg" /></div>

  </div>

</body>

</html>

乌镇程序员 2011-06-10

打赏
举报

div #right {

  float:right;

  margin:0; /*漏掉个分号*/

  width:300px;

  height:auto;

}

inetfuture 2011-06-10

打赏
举报



div #left

{

  float:left;

  margin:0;

  width:300px;

  height:auto;

}

div #right

{

  float:left;

  margin:0

  width:300px;

  height:auto;

}

letian1989615 2011-06-10

打赏
举报

楼主你
div #right
{
float:right;
margin:0
width:300px;
height:auto;
}
margin:0缺了个“;”
而且你的第一个
div
{
float:left;
padding:0;
width:1366px;
height:auto;
}的宽度个人感觉太宽了
一般我个人不会给div标签定义宽度
那样的话所有的div都会成这个宽度
你的原因就是少写了分号结果导致你的
div #right中的宽度失效了然后他就成了 1366px
这样的话浏览器的宽度就不够放下那俩DIV了所以它就自动换行下去了

LXQYYH 2011-06-10

打赏
举报

div #right的margin漏写啦分号，要小心一点哦！

斥候_游骑兵 2011-06-10

打赏
举报



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

  <title>无标题页</title>

  <link rel="Stylesheet" type="text/css" href="css/sortPhoto.css" />

</head>

<body>

  <form id="form1" runat="server">

  <div>

  <div id="left"><img src="image/1.jpg"/></div>

  <div id="right"><img src="image/2.jpg" /></div>

  </div>

  </form>

</body>

</html>

*******************************************

sortPhoto.css

**************************************

body  

{



}

div

{

  float:inherit;

  padding:0;

  width:400px;

  height:auto; 

}



#left

{

 float:left;

 padding:0;

 width:200px;

 height:auto; 



}

#right

{

 float:right;

 padding:0;

 width:200px;

 height:auto; 

}

#img

{

width:300px;

height:300px;

}

这个没问题

斥候_游骑兵 2011-06-10

打赏
举报

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="css/sortPhoto.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="left"><img src="image/1.jpg"/></div>
<div id="right"><img src="image/2.jpg" /></div>
</div>
</form>
</body>
</html>
*******************************************
sortPhoto.css
**************************************
body
{

}
div
{
float:inherit;
padding:0;
width:400px;
height:auto;
}

#left
{
float:left;
padding:0;
width:200px;
height:auto;

}
#right
{
float:right;
padding:0;
width:200px;
height:auto;
}
#img
{
width:300px;
height:300px;
}

missgd152 2011-06-10

打赏
举报

二楼的说得对，就是漏掉了一个分号。。

wowtejinjie 2011-06-10

打赏
举报

还真是少分号，代码往设计器里面一贴。颜色就不对了

a306518193 2011-06-10

打赏
举报

当然，如果不行的话那就是你div的宽度不对。具体是哪里不对就要你自己查找了，说不定你在哪里又多了什么定义呢。就像下面的。



div

{

  float:left;

  padding:0;

  width:1366px;

  height:auto;

}

a306518193 2011-06-10

打赏
举报

把你需要并排的DIV中的css样式里float的值都写left（或者right）就好了，哪有那么麻烦啊？？！！

beijicool 2011-06-10

打赏
举报

都是牛人..

一、并排在一行的两个div样式有这种情况：ie或者ff下对于子div设置float左的时候，如果另外的子div没有设置float左的话，两个浏览器下会有区别，具体有一个会产生间隙。兼容做法就是都设置float属性。但是记住有...

包裝三個和兩個div給包裝器 align-row ( 請參見 .align 代碼)同時也給父 align-table ( 見你的#sections )如果你刪除了，它也能讓你有一個真正的響應式布局，因為CSS規則 table-layout: fixed; site，同時也會自動改...

01/23/2014, Posted in 移动 Comments: No comments ...最近在做一个div css...一、并排在一行的两个div样式有这种情况：ie或者ff下对于子div设置float左的时候，如果另外的子div没有设置float左的话，两个

手朋友有所帮助： 1.float:left 功能：使多个div平行并排用法： <div id="div1" style="float:left;width:20px;"></div> <div id="div2" style="float:left;width:20px;"></...

趁现在还清醒赶紧记下笔记先：一、并排在一行的两个div样式有这种情况：ie或者ff下对于子div设置float左的时候，如果另外的子div没有设置float左的话，两个浏览器下会有区别，具体有一个会产生间隙。兼容做法就是都...

CSS

61,115

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章